Bootstrap 3 - disable navbar collapse

Question

This is my simple navbar:

<div class="navbar navbar-fixed-top myfont" role="navigation">     <div class="">         <ul class="nav navbar-nav navbar-left">             <li>                 <a class="navbar-brand" href="#">                     <img src="assets/img/logo.png"/>                 </a>             </li>             <li>                 <button class="btn btn-navbar">                     <i class="fa fa-edit"></i>                     Create                  </button>             </li>         </ul>     </div>     <ul class="nav navbar-nav navbar-right">         <li data-match-route="/"><a href="#/page-one">Login</a></li>         <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>     </ul> </div> 

I just would like to prevent this to collapse, cause I don't need it, how to do?

I would like to avoid writing 300K lines of CSS for overriding the default styles.

Any suggestion?

Answer 1

After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override:

.navbar-collapse.collapse {   display: block!important; }  .navbar-nav>li, .navbar-nav {   float: left !important; }  .navbar-nav.navbar-right:last-child {   margin-right: -15px !important; }  .navbar-right {   float: right!important; } 

And with this your menu won't collapse.

DEMO (jsfiddle)

EXPLANATION

The four CSS properties do the respective:

1. The default .collapse property in bootstrap hides the right-side of the menu for tablets(landscape) and phones and instead a toggle button is displayed to hide/show it. Thus this property overrides the default and persistently shows those elements.

2. For the right-side menu to appear on the same line along with the left-side, we need the left-side to be floating left.

3. This property is present by default in bootstrap but not on tablet(portrait) to phone resolution. You can skip this one, it's likely to not affect your overall navbar.

4. This keeps the right-side menu to the right while the inner elements (li) will follow the property 2. So we have left-side float left and right-side float right which brings them into one line.

Answer 2

The nabvar will collapse on small devices. The point of collapsing is defined by @grid-float-breakpoint in variables. By default this will by before 768px. For screens below the 768 pixels screen width, the navbar will look like:

It's possible to change the @grid-float-breakpoint in variables.less and recompile Bootstrap. When doing this you also will have to change @screen-xs-max in navbar.less. You will have to set this value to your new @grid-float-breakpoint -1. See also: https://github.com/twbs/bootstrap/pull/10465. This is needed to change navbar forms and dropdowns at the @grid-float-breakpoint to their mobile version too.

Easiest way is to customize bootstrap

find variable:

 @grid-float-breakpoint 

which is set to @screen-sm, you can change it according to your needs. Hope it helps!

---

For SAAS Users

add your custom variables like $grid-float-breakpoint: 0px; before the @import "bootstrap.scss";