Bootstrap navbar - removing fixed header from mobile devices

Question

How do I change the header to be not fixed for mobile devices, but fixed for md and lg screen sizes?

For example can you change the nav class to;

Mobile: <nav class="navbar navbar-default" role="navigation">

Desktop: <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

??

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-brand navbar-brand-centered">Brand</div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>           
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

You want to isolate from mobile devices or smaller screen sizes? There's a difference. If you want the latter:

HTML:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

CSS:

@media (min-width:992px) {

    body {padding-top:HEIGHTOFNAVBAR}
    .navbar-static-top {position:fixed;top:0;right:0;left:0;}

}

If you want actually avoid fixed navigation on mobile devices, you can sniff out whether or not the device is touch or not with javascript.

/* --------------- SUPPORTS TOUCH OR NOT for IOS, Android, and Windows Mobile --------------- */
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports = (function() {
    var d = document.documentElement,
        c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        }
    } else {
        d.className += " no-touch";
        return {
            touch: false
        }
    }
})();

Then you can use HTML (the same):

<nav class="navbar navbar-default navbar-static-top" role="navigation">

CSS

  .no-touch body {padding-top:HEIGHTOFNAVBAR}
  .no-touch .navbar-static-top {position:fixed;top:0;right:0;left:0;}

Answer 2

To set the none fixed header for mobiles is not to hard its just a CSS propety:

CSS

.headerclass { position:static;} //over rides the position fixed

Now changing the classes is a bit harder but what you can do is hook onto the media query changes. This needs to be done with Jquery (comes with bootstrap).

You have to search for css changes. If we set some value on a media query then we can toggle classes.

CSS

@media only screen 
and (min-device-width : 1224px) {
    width:300px;
}

JavaScript Jquery

var navbar = $('navbar');
if (navbar.css('width') == '300px') {
    navbar.addClass('navbar-default navbar-fixed-top');
}

I use these measurements : Link