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?
This question is related to
css
twitter-bootstrap-3
navbar
collapse
preventdefault
The answer is
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";
If you're not using the less version, here is the line you need to change:
@media (max-width: 767px) { /* Change this to 0 */
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none;
}
}
Here's an approach that leaves the default collapse behavior unchanged while allowing a new section of navigation to always remain visible. Its an augmentation of navbar; navbar-header-menu is a CSS class I have created and is not part of Bootstrap proper.
Place this in the navbar-header element after navbar-brand:
<div class="navbar-header-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">I'm always visible</a></li>
</ul>
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
Add this CSS:
.navbar-header-menu {
float: left;
}
.navbar-header-menu > .navbar-nav {
float: left;
margin: 0;
}
.navbar-header-menu > .navbar-nav > li {
float: left;
}
.navbar-header-menu > .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-header-menu > .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
width: auto;
margin-top: 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-header-menu > .navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-header-menu > .navbar-form > .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-header-menu > .navbar-left {
float: left;
}
.navbar-header-menu > .navbar-right {
float: right !important;
}
.navbar-header-menu > *.navbar-right:last-child {
margin-right: -15px !important;
}
Check the fiddle: http://jsfiddle.net/L2txunqo/
Caveat: navbar-right can be used to sort elements visually but is not guaranteed to pull the element to the furthest right portion of the screen. The fiddle demonstrates that behavior with the navbar-form.
The following solution worked for me in Bootstrap 3.3.4:
CSS:
/*no collapse*/
.navbar-collapse.collapse.off {
display: block!important;
}
.navbar-collapse.collapse.off ul {
margin: 0;
padding: 0;
}
.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
float: left !important;
}
.navbar-right.no-collapse {
float: right!important;
}
then add the .no-collapse class to each of the lists and the .off class to the main container. Here is an example written in jade:
nav.navbar.navbar-default.navbar-fixed-top
.container-fluid
.collapse.navbar-collapse.off
ul.nav.navbar-nav.no-collapse
li
a(href='#' class='glyph')
i(class='glyphicon glyphicon-info-sign')
ul.nav.navbar-nav.navbar-right.no-collapse
li.dropdown
a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
| Tools
span.caret
ul.dropdown-menu(role='menu')
li
a(href='#') Tool #1
li
a(href='#')
| Logout
Another way is to simply remove collapse navbar-collapse from the markup. Example with Bootstrap 3.3.7
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">_x000D_
_x000D_
<nav class="navbar navbar-atp">_x000D_
<div class="container-fluid">_x000D_
<div class="">_x000D_
<ul class="nav navbar-nav nav-custom">_x000D_
<li>_x000D_
<a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>_x000D_
</li>_x000D_
</ul>_x000D_
<ul class="nav navbar-nav navbar-right">_x000D_
<li>Nav item</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</nav>Source: Stackoverflow.com