Is it possible to use Twitter Bootstraps .navbar-fix-to-top only on mobile devices?

Question

I have Twitter Bootstrap 3 webpage with this navbar:

<div class="col-xs-12 col-md-10 col-md-offset-1">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">
          Title
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        ...
      </div>
    </nav>
</div>

It looks good on desktop with some top margin. But is it possible to use the .navbar-fixed-to-top only on mobile devices? So that on a mobile device the navbar is always on top without top, left and right margin?

Answer 1

The simplest way is using only CSS. No javacript required. I used the styles for .navbar-top-fixed from the navbar.less, inside the .navbar-default. If you have a different classname just change it. If your navbar is heigher than 50px you should change the body margin-top padding also.

@media (max-width: 767px) {
    body {
        margin-top: 50px;
    }
    .navbar-default {
        position: fixed;
        z-index: 1030; //this value is from variables.less -> @zindex-navbar-fixed
        right: 0;
        left: 0;   
        border-radius: 0;
        top: 0;
        border-width: 0 0 1px;
    }      
}