On a site that am working on I have changed the breakpoint with one pixel. When you open this page in a 768 pixel wide window, the topmenu does not disappear and the menu button that should appear is not there.
When changed to a width of 767 pixels all is working fine.
I can't figure out what I am missing here.
You can try changing the @grid-float-breakpoint and the recompiling
From the navbar docs:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
Or, if you don't want to re-compile, take Skelly's code:
<!-- language: lang-css --> <pre><code>@media (max-width: <b>767px</b>) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } } </code></pre>
