Fixed Navbar Bug on Tablet Devices

Topic: Fixed Navbar Bug on Tablet Devices

surface2air free asked 7 years ago

Hi MDB Support!

I have detected a bug on the Fixed Navbar for tablet devices and iPads. I am wondering how to collapse the navigation pane, e.g., as with smartphones, so that site visitors can toggle between navigation and page content views. I am trying to resolve this by using helper classes to hide and show the toggled navigation link views from different viewport displays (e.g., "hidden-lg", "hidden-md") but no luck.

My client is very particular about this bug.

To repro:

1. Open Screenfly from Quirktools and visit the following page:

http://quirktools.com/screenfly/

2. Choose from the Quirktools Screenfly menu on the upper left the icon for "Tablets" and view page.

3. Then select from the same navigation bar the option to "Rotate Screen" (768 x 1024 px screen resolution). The horizontal (landscape) orientation at 1024 x 768 screen resolution checks, but if the page is viewed in vertical (portrait) orientation, the navbar sticks in a fixed toggled-open view.

I have also tested this issue on my tablet device and the result is identical to this, but I wanted to share the Screenfly tool to reproduce this bug here for illustration.

We very much appreciate any help with to resolve this!

Thank you!

Eric
Seattle, Washington

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

<p>Hi, Eric,</p>
<p>thank you for your message. </p>
<p>Try to use the code below (just adapt it to your needs). </p>
<p>              `<br />
                <nav class="navbar navbar-toggleable-md navbar-light fixed-top scrolling-navbar"><br />
                    <div class="container"><br />
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"><br />
                            <span class="navbar-toggler-icon"></span><br />
                        </button><br />
                        <a class="navbar-brand" kvw-banner" href="default.htm"><br />
                            <strong>N a v b a r</strong><br />
                        </a><br />
                        <div class="collapse navbar-collapse" id="navbarNav4"><br />
                            <ul class="navbar-nav mr-auto"><br />
                                <li class="nav-item active"><br />
                                    <a class="nav-link">Home <span class="sr-only">(current)</span></a><br />
                                </li><br />
                                <li class="nav-item"><br />
                                    <a class="nav-link">Background</a><br />
                                </li><br />
                                <li class="nav-item"><br />
                                    <a class="nav-link">Portfolio</a><br />
                                </li><br />
                                <li class="nav-item"><br />
                                    <a class="nav-link" href="writings.htm">Writings</a><br />
                                </li><br />
                                <li class="nav-item"><br />
                                    <a class="nav-link" href="testimonials.htm">Testimonials</a><br />
                                </li><br />
                            </ul><br />
                            <ul class="navbar-nav ml-auto nav-flex-icons"><br />
                                <li class="nav-item"><br />
                                    <a class="nav-link waves-effect waves-light"><i class="fa fa-facebook-official" aria-hidden="true"></i></a><br />
                                </li><br />
                                <li class="nav-item"><br />
                                    <a class="nav-link waves-effect waves-light"><i class="fa fa-instagram" aria-hidden="true"></i></a><br />
                                </li><br />
                                <li class="nav-item"><br />
                                    <a class="nav-link waves-effect waves-light"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a><br />
                                </li><br />
                            </ul><br />
                        </div><br />
                    </div><br />
                </nav><br />
`</p>

Please insert min. 20 characters.

Hi, Eric,

thank you for your message.

Try to use the code below (just adapt it to your needs).

`
<nav class="navbar navbar-toggleable-md navbar-light fixed-top scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" kvw-banner" href="default.htm">
<strong>N a v b a r</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Background</a>
</li>
<li class="nav-item">
<a class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="writings.htm">Writings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.htm">Testimonials</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</nav>
`

surface2air free commented 6 years ago

Hi Magdalena (@Magda), My client is really particular about having these support pages appear in a Google search with his full name visible. Can one of your support techs remove all references to his name in your posts? I can edit my own support posts at my end. Thanks, have a great week. Eric Seattle, Washington

Piotr Bender free commented 6 years ago

Hello Eric, I have just removed the references. Best regards, Piotr from MDB

surface2air free commented 6 years ago

Hi Piotr, Thank you! Have a great weekend and week ahead. Best, Eric, Seattle, Washington

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

surface2air

47Support score
20Questions 12Answers 0Snippets