Add the class `always-open` to your navbar and then use the following CSS:



    .navbar.always-open {
        border-radius: 0;
    }
    .navbar.always-open .navbar-header {
      float: none;
    }
    .navbar.always-open .navbar-toggle {
      display: block;
    }
    .navbar.always-open .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar.always-open .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar.always-open .navbar-nav {
      float: none!important;
      margin: 7.5px -15px;
    }
    .navbar.always-open .navbar-nav>li {
      float: none;
    }
    .navbar.always-open .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
    }

Example HTML:



<pre><code>&lt;nav class=&quot;navbar navbar-inverse <b>always-open</b>&quot;&gt;
    &lt;div class=&quot;navbar-header&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;
        &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; 
                data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
            &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;navbar-collapse collapse&quot;&gt;
        &lt;ul class=&quot;nav navbar-nav&quot;&gt;
            &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

## [Demo in fiddle][fiddle]

**Screenshot**:

[![screenshot][screenshot]][fiddle-show]

*[Adapted from this bootply][bootply]

> **BTW**, if you're building your own version of Bootstrap with less:    
You can just [alter the `@grid-float-breakpoint` from `@screen-sm-min` to `999999999px`][grid-float-breakpoint]


[fiddle]: http://jsfiddle.net/KyleMit/m49Bb/
[fiddle-show]: http://jsfiddle.net/KyleMit/m49Bb/show

[screenshot]: http://i.imgur.com/i52L5hO.gif

[bootply]: http://www.bootply.com/114896
[grid-float-breakpoint]: https://stackoverflow.com/a/23668038/1366033

I am setting up a website by using the [customizr wordpress theme](http://demo.themesandco.com/) which is based on twitter bootstrap and would like to have the navbar always appear in the collapsed layout so that the menu items are only visible by clicking on the `navbar-toggle` button (three horizontal lines).

I believe that I have to modify the CSS the `@media` min and max width but is not working properly. 

In simpler terms, I want it to be appear on my desktop the same way it would on a mobile device.