Hide navbar in mobile browsers

Question

I'm making a mobile responsive site using Twitter Bootstrap. I'd like to completely hide the top navbar when the site is viewed on mobile. Anyone know a way to do this?

Answer 1

The easiest way is to use the responsive utility classes .hidden-phone and .hidden-tablet

<div class="navbar hidden-tablet hidden-phone">

You could also use a media query such as..

@media (max-width: 767px) { 
    .navbar{
        display:none;
    }
}

More on responsive classes here: http://twitter.github.io/bootstrap/scaffolding.html#responsive

Demo

Answer 2

Bootstrap 3 has just .hidden-xs/sm/md/lg

Phone/tablet/desktop apply for BS2.x only

Answer 3

Try this!
just add "hidden-xs" to the div class

<div class="navbar hidden-xs">