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?

Shrink your browser window down to a small viewport. The interface will render the same as a mobile device when you get small enough. — Surreal Dreams, Jan 30 '14 at 19:26

Valeriu Ciuca · Answer 1 · 2016-03-23T10:19:18.317

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;
    }      
}

Florin · Answer 2 · 2014-01-30T19:25:24.313

4

YES it is

.visible-xs     Visible     Hidden  Hidden  Hidden
.visible-sm     Hidden  Visible     Hidden  Hidden
.visible-md     Hidden  Hidden  Visible     Hidden
.visible-lg     Hidden  Hidden  Hidden  Visible
.hidden-xs  Hidden  Visible     Visible     Visible
.hidden-sm  Visible     Hidden  Visible     Visible
.hidden-md  Visible     Visible     Hidden  Visible
.hidden-lg  Visible     Visible     Visible

http://getbootstrap.com/css/#responsive-utilities

Class prefix    .col-xs-    .col-sm-    .col-md-    .col-lg-
# of columns    12
Column width    Auto    60px    78px    95px

edited Jan 30 '14 at 19:25

answered Jan 30 '14 at 19:24

Florin

4,177
1
17
29

1

thanks this was helpful because i am trying to make a navbar fixed on large screen only, and this reminded me i can use these classes to create some logic, and just have two separate navbars, one fixed, and one not, without using media queries. The reason i dont want to use media queries in this instance is because im using the bootstrap default style of navbar-fixed-top and dont want to override this style (dont like to edit core when not necessary). I see this is a viable answer to the OP. – blamb May 25 '14 at 00:34

Juan · Accepted Answer · 2014-01-30T19:36:12.953

3

you can use a media query for that, something like this:

@media screen and (max-width: 480px)  
{
    nav.navbar
    {
       margin: auto; /*or the margin that you need*/
    }   
}

edited Jan 30 '14 at 19:36

answered Jan 30 '14 at 19:27

Juan

4,291
3
36
40

score 2 · Answer 4 · edited May 23 '17 at 12:03

I would do it this way, using jQuery - detect the User Agent and add the fixed class if necessary.

<script>
$(document).ready(function() {

// Create string to check for mobile device User Agent String
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

// If we detect that string, we will add the fixed class to our .navbar-header with jQuery
if ($.browser.device) {
   $('.navbar-header').addClass('navbar-fixed-to-top');
}
});
<script>

Source: What is the best way to detect a mobile device in jQuery?

blamb · Answer 5 · 2016-02-07T02:19:44.123

I like the idea of putting it in jQuery better, as mentioned by Elon Zito, so that you don't have to add a cryptic override for the larger devices when following the correct pattern. e.g. if you add navbar-fixed-top to the base template, then you need to set the navbar-fixed-top to position:relative for xs and up devices, then set navbar-fixed-top back to position:fixed; for medium and large devices, etc...

To avoid this, you can use the bootstrap env variable that is available, this way it will work in small resolution browsers, and not just mobile devices as mentioned above, which makes more sense when using bootstrap. i.e. you should avoid checking for device, and try to stick with media queries instead.

$(document).ready(function () {    
    var bsEnv = findBootstrapEnvironment();    
    if(bsEnv != 'lg') {
        $('#navbar').addClass('navbar-fixed-top');
     }
});

function findBootstrapEnvironment() {    
    var envs = ['xs', 'sm', 'md', 'lg'];
    $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env
        }
    };
}

How do you make this work on large screen devices? `navbar-fixed-top` only gets applied to my navbar if the browser window is only like 50% opened — Mills, Aug 05 '16 at 17:40

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

5 Answers5