CODEWITHSUNDEEP
htmlmobiletwitter-bootstrap
user1429007
user1429007

Reputation: 308

unable to float twitter bootstrap navbar on mobile/ipad browsers

Using "navbar" along with "navbar-fixed-top" class floats the navigation bar on top of the page when you scroll the page down. This doesn't seem to work on mobile/ipad browsers. Why and how do we make them float on mobile browsers as well. 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 do have the below line in the head tag to enable bootstrap-responsive for mobile devices.

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

Any suggestions

Upvotes: 6

Views: 11865

Answers (2)

Paolo Casciello
Paolo Casciello

Reputation: 8202

I had the same problem and I've investigated a little on other frameworks. Since JQuery Mobile works correctly with fixed navbar the problem must be only on Bootstrap' side, in fact they disabled it on purpose (more details below).

You can try basically by adding the style inline.

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

Of course you need to adjust navbar styles accordingly. I did as follows:

/* 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 the responsive css.

I tried with various devices... a low-cost android tablet, my highend android phone. I never tried on iOS. The most amazing thing is it works perfectly smooth on Firefox for Android.

This is one of the issues on github replied by Bootstrap's authors with references to detailed solution adopted by JQM: https://github.com/twitter/bootstrap/issues/1617

Upvotes: 12

Marcin Sk&#243;rzewski
Marcin Sk&#243;rzewski

Reputation: 2854

Bootstrap in not using fixed navbar in small screens because it is not working well in mobile devices. In bootstrap-responsive.css you can find:

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

Try to delete it or just do not load bootstrap-responsive.css stylesheet, and check what will happen on mobile devices, then you will see it is necessary :) In my low-cost Android mobile fixed elements are not fixed during scrolling. All visible screen is traversed. After scroll finishes, browser recalculates positions of fixed elements and the navbar jumps to the correct place.

Upvotes: 5

Related Questions