Bootstrap 3 - show collapsed navigation for all screen sizes
You can use override the default Bootstrap CSS like this...
.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;
}
Demo: http://www.bootply.com/114896
This will ensure that the collapsed navbar is always used by overriding the Bootstrap @media queries.
Update: For Bootstrap 4, you just need to remove the navbar-toggleable class:
http://www.codeply.com/go/LN6szcJO53
How to keep Bootstrap 3 navbar as collapsed for all screen sizes
You could use CSS to override the Bootstrap 3 defaults. For example, this would set the navbar to collapse on screen widths less than 2000 pixels (accommodating most screens)..
@media (max-width: 2000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Demo: http://www.bootply.com/122572
Update for Bootstrap 4 (beta)
In Bootstrap 4 the navbar is always collapsed into the mobile/hamburger version by default: Demo. The navbar-expand-* class are used to change the breakpoint.
How to keep navigation bar collapsed on all screen sizes?
The answer suggested by tao worked at 60% but not all the way for me. Here I share what finally did it for me. In my custom.css I override bootstrap with custom rules
custom.css
@media (min-width: 768px) {
.navbar .navbar-header,
.navbar .navbar-nav>li {
float: none;
}
.navbar .navbar-nav {
float: none;
margin: 7.5px -15px;
}
.navbar .navbar-toggle {
display: block;
margin-right: 0;
}
.navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar .navbar-collapse.collapse {
display: none;
}
.navbar .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar .navbar-text {
float: none;
margin: 15px 0;
}
.navbar .navbar-collapse.collapse.in {
display: block;
}
.navbar .collapsing {
overflow: hidden;
}
}
I had to comment out this line in bootstrap.min.cs to make it all work :
.navbar-collapse.collapse {
/* display:block!important;*/
height:auto!important;
padding-bottom:0;
overflow:visible!important
}
Collapsed Navbar only showing on small screen size bootstrap
You are using bootstrap 3 markup and linking to bootstrap 4 css either link to bootstrap 3's css and javascript like so:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Or change your navbar markup to bootstrap 4's markup like so:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="logo" src="logo.png" width="250px;">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Build</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
How to make Navbar collapse from 1024 pixel screen size
Use the following css code and give the value as you wish. This will give the breakpoint to the collapsed menu.
Updated.
I added an extra class to each place .navigatsioon . Then it worked
@media (max-width: 1024px) { .navigatsioon ul.nav.navbar-nav { margin-left: -15px; } .navigatsioon .navbar-header { float: none; } .navigatsioon .navbar-left, .navbar-right { float: none !important; } .navigatsioon .navbar-toggle { display: block; } .navigatsioon .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navigatsioon .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navigatsioon .navbar-collapse.collapse { display: none!important; } .navigatsioon .navbar-nav { float: none!important; margin-top: 7.5px; } .navigatsioon .navbar-nav>li { float: none; } .navigatsioon .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .navigatsioon .collapse.in { display: block !important; }}
.navbar-nav.navbar-center { position: absolute; left: 45%; transform: translatex(-45%);}
.navbar .navbar-brand { padding-top: 5px; padding-left:150px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar navbar-default navbar-fixed-top navigatsioon"> <div class="container-fluid">
<div class="navbar-header navigatsioon"> <button button type="button" class="navbar-toggle collapsed navigatsioon" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand navbar-center navigatsioon" rel="home" href="#" title="Buy Sell Rent Everyting" > <!--<img style="max-width:100px; margin-top: -7px;" src="//www.google.com/favicon.ico"> --> <img style=" margin-top: -7px;" src="http://madisonmountaineering.com/wp-content/uploads/2014/03/MM_header_logo.png">
</a> </div>
<div id="navbar" class="collapse navigatsioon navbar-collapse navbar-responsive-collapse"> <ul class="nav navigatsioon navbar-nav navbar-center"> <li><a href="http://madisonmountaineering.com/about/">ABOUT</a></li> <li><a href="http://madisonmountaineering.com/#expeditions">EXPEDITIONS</a></li> <li><a href="http://madisonmountaineering.com/gallery/">GALLERY</a></li> <li><a href="http://madisonmountaineering.com/#press">PRESS</a></li> <li><a href="http://madisonmountaineering.com/garrettmadison/">GARRETT MADISON</a></li> <li><a href="http://madisonmountaineering.com/#contact">CONTACT US</a></li> <li><a href="http://madisonmountaineering.com/dispatches/" style="color: red !important;">DISPATCHES</a></li> <li><a href="https://www.facebook.com/MadisonMtng" class="icon_ref"><i class="fa fa-facebook" style="color: #3b5998;"></i></a></li> <li><a href="https://twitter.com/madisonmtng" class="icon_ref"><i class="fa fa-twitter" style="color: #00aced;"></i></a></li>
<li><a href="https://youtube.com/madisonmtng" class="icon_ref"><i class="fa fa-youtube" style="color: #bb0000;"></i></a></li> <li><a href="https://instagram.com/madisonmtng" class="icon_ref"><i class="fa fa-instagram" style="color: #5e3e23;"></i></a></li> <li><a href="https://plus.google.com/madisonmtng" class="icon_ref"><i class="fa fa-google-plus" style="color: #dd4b39;"></i></a></li> </ul> </div>
</div></div>Bootstrap 3 Navbar Collapse
I had the same problem today.
Bootstrap 4
It's a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
You have to use .navbar-expand{-sm|-md|-lg|-xl} classes:
<nav class="navbar navbar-expand-md navbar-light bg-light">
Bootstrap 3
@media (max-width: 991px) {
.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;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
Just change 991px by 1199px for md sizes.
Demo
Keep navigation items on all screen sizes
Here's an example of how you can keep your icons inside the navbars container (so all elements inside the navbar remain consistent) and then position the icons to remain exposed on viewports under 768px.
@media (max-width: 767px) { .navbar .navbar-right.navbar-top { position: absolute; margin-top: 4px; right: 80px; } .navbar .navbar-right.navbar-top > li { display: inline-block; } .navbar .navbar-right.navbar-top > li > a { padding-right: 10px; padding-left: 10px; }}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar navbar-inverse navbar-fixed-top bo-header"> <div class="container"> <ul class="nav navbar-nav navbar-right navbar-top"> <li><a href="#"><i class="fa fa-envelope"></i></a> </li> <li><a href="#"><i class="fa fa-users"></i></a> </li> <li><a href="#"><i class="fa fa-wrench"></i></a> </li> </ul> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">MY BRAND</a> </div> <!-- non-collapsing items --> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav navbar-left"> <li><a href="#">Nav Entry 1</a> </li> <li><a href="#">Nav Entry 2</a> </li> <li><a href="#">Nav Entry 3</a> </li> <li><a href="#">Nav Entry 4</a> </li> </ul> </div> </div></nav>Collapse navbar on all size except large
Just use media query with overriding the navbar css class as follows to keep them in collapsed mode till max size 1200px. Add the following css rules within a css file and make sure to add this custom css file right after the bootstrap css file link in the head tag.
/*To keep the navbar collapsed on less or equal to 1200px screens size*/
@media (max-width: 1200px) {
.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-collapse.collapse.in {
display: block !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;
}
}
Sample code: http://codepen.io/Nasir_T/pen/jVaQyX
Change bootstrap navbar collapse breakpoint without using LESS
You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.
Related Topics
How to Set Favicon.Ico Properly on Vue.Js Webpack Project
How to Play CSS3 Transitions in a Loop
What Is Aria-Label and How to Use It
Make Tbody Scrollable in Webkit Browsers
CSS Layout 2-Column Fixed-Fluid
How to Preload Images Without JavaScript
How to Apply a CSS Gradient Over a Text, from a Transparent to an Opaque Colour
Multiple Submit Buttons on HTML Form - Designate One Button as Default
How to Trigger HTML Button When You Press Enter in Textbox
How to Remove The Horizontal Scrollbar in a Div
Draw Svg on HTML5 Canvas with Support for Font Element
Bootstrap Full-Width Text-Input Within Inline-Form
Flex Elements Ignore Percent Padding in Firefox