Can I use Twitter Bootstraps.navbar-fix-to-top only on mobile devices?

Question

I have a Twitter Bootstrap 3 webpage with this navigator:

<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 great on the desktop with some top edge. But is it possible to use .navbar-fixed-to-top only on mobile devices? So on a mobile device, is the navigation bar always on top without the top, left, and right margins?

Answer 1

To do this, you can use a media query, for example:

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

Answer 2

YES it

 .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 

Answer 3

I would do it this way using jQuery - find the User Agent and add a 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 discover a mobile device in jQuery?

Answer 4

I like the idea of ​​putting it in jQuery better, as Elon Zito mentioned, so you don't need to add cryptographic overrides for larger devices, following the correct pattern. for example, if you add navbar-fixed-top to the base template, then you need to set navbar-fixed-top to position:relative for xs and up the device, then set navbar-fixed-top to position:fixed; for medium and large devices, etc ...

To avoid this, you can use the bootstrap env variable, which is available, so it will work in low-resolution browsers, and not just on mobile devices, as indicated above, which makes sense when using the bootstrap. that is, you should avoid checking the device and try using 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 } }; } 

Answer 5

The easiest way is to use only CSS. No javacript needed. I used styles for .navbar-top-fixed from navbar.less, inside .navbar-default. If you have a different class name, just change it. If your navigator is larger than 50 pixels, you should also change the top of the box.

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