html - Bootstrap 3 - show collapsed navigation for all screen sizes -


I am using Bootstrap v3.

I have a place of Nauwer class, so when I have changed the navigation screen to the screen size and a toggle button appears like a small grid - so it is working as expected .

What I would like, this is the default action for all screen sizes. That is, even on any desktop, I would like to collapse the navigation and would like the toggle button to appear.

I have taken a look through CSS and have a whole bunch of stuff which is functionality, although I do not know which parts to change.

I have tried to comment on large media queries, though there is a lot of them and it has a knock-down effect

You can use the default bootstrap CSS override ...

  .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 & gt; Li {float: none; } .navbar-nav & gt; Li & gt; A {padding-top: 10px; Padding-down: 10px; }  

Demo:

This will ensure that the collapsed navbar is always used by overriding bootstrap @ media queries.

Update: For Bootstrap 4, all you have to do is remove the navbar-toggleable class:


Comments