Geek Answers Handbook

Failed to float twitter bootstrap navbar on mobile / iPad browsers

Using navbar with the navbar-fixed-top class floats in the navigation bar at the top of the page when scrolling down the page. This does not seem to work on mobile / ipad browsers. Why and how we make them float on mobile browsers. Tried this on ipad (safari, chrome) Android (firefox) Windows Phone (IE).

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <span class="brand"><img title="Logo" alt="Logo" src="static/images/iu_logo.gif" /></span> <div class="nav-collapse"> <ul class="nav"> <li class="active"> <a id="homeLink" href="#">Home</a> </li> <li class="dropdown"> <a class="dropdown-toggle" id="newsLink" href="#">News</a> <ul class="dropdown-menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="divider"></li> <li><a href="#">Another link</a></li> </ul> </li> </ul> <ul class="nav pull-right"> <li id="loginLink"><a href="#" id="loginButton">Login</a></li> </ul> </div> </div> </div> 50 lines of text (just to have the page scrollable) </body> </html>

I have the bottom line in the head tag to activate the download for mobile devices.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Any suggestions

+6
source share
2 answers

I had the same problem and did a little research on other structures. Since JQuery Mobile works correctly with fixed navigation, the problem should only be on the side of Bootstrap, because they specifically disabled it (see below for more details).

You can try mostly by adding inline style.

 <div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">

Of course, you need to change the navigator styles accordingly. I have done the following:

 /* Override Bootstrap Responsive CSS fixed navbar */ @media (max-width: 979px) { .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; margin-left: 0px; margin-right: 0px; } }

I added this after responsive css.

I tried with various devices ... an inexpensive Android tablet, my high-performance Android phone. I have never tried iOS. The most amazing thing is that it works great on Firefox for Android.

This is one of the github issues that Bootstrap authors answered with links to a detailed solution made by JQM: https://github.com/twitter/bootstrap/issues/1617

+12
source

Bootstrap does not use a fixed navigation bar on small screens because it does not work well on mobile devices. In bootstrap-responsive.css you can find:

 @media (max-width: 979px) { ... .navbar-fixed-top, .navbar-fixed-bottom { position: static; } ... }

Try deleting it or just don’t download the bootstrap-responsive.css stylesheet and check what happens on mobile devices, then you will see that this is necessary :). In my inexpensive Android, mobile fixed elements are not fixed while scrolling. The entire visible screen moves. After completing the scroll, the browser recounts the positions of the fixed elements and navigation jumps to the desired location.

+5
source

More articles:


All Articles