Topic: Fixed Navbar Bug on Tablet Devices

surface2air free asked 6 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:

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!

Seattle, Washington

Magdalena Obalska free answered 6 years ago

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>
<a class="navbar-brand" kvw-banner" href="default.htm">
<strong>N a v b a r</strong>
<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 class="nav-item">
<a class="nav-link">Background</a>
<li class="nav-item">
<a class="nav-link">Portfolio</a>
<li class="nav-item">
<a class="nav-link" href="writings.htm">Writings</a>
<li class="nav-item">
<a class="nav-link" href="testimonials.htm">Testimonials</a>
<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 class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

surface2air free commented 5 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 5 years ago

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

surface2air free commented 5 years ago

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

Please insert min. 20 characters.


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


Specification of the issue

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