Can we set width of browser to display the collapse button of a navigation bar in bootstrap??
I think media queries may help me with this..but i don't know to set min width of browser window
You can use a media query for this. For example, this would make the collapse button toggle at 1280 pixels..
#media (max-width: 1280px) {
.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;
}
}
Example on Bootply: http://bootply.com/98488
If you are using bootstrap-3,you can use col
<div class="col-md-8">.col-md-8</div>
for details http://getbootstrap.com/css/
Go to http://getbootstrap.com/customize/ the #grid-float-breakpoint is the last field in this screen shot, there you can enter the breakpoint (#screen-sm-min - 768px, #screen-mid-min - 992px) of where you want the menu to turn into the collapsed version.
Related
I'm not really good with css, somehow I managed to modify my navbar to make the collapsible button appear no matter how small or big the screen size is by adding this on my Site.css:
#media (max-width: 4000px) {
.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;
}
.navbar-form {
width: 100%;
}
}
Now my navbar behaves the way I want it to except for 1 thing:
When I click the collapsible button, the drop down menu background takes all the space of the screen. What I want is when user is on desktop, the collapsible menu takes a specific width only. What should I change in my css file? This is my desired output (when using desktop ONLY):
In bootstrap 3, I want the navbar to be collapsed by default for all screen sizes.
I have found here that Bootstrap 3 being mobile first, its navbar is "collapsed" by default and and "expands" when it reaches a certain minimum size.. Following that post, I tried messing around with #grid-float-breakpoint for customized css, but I got nowhere. Please guide me from here.
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.
I have been trying to figure out how to use a media query to collapse the bootstrap 3 collapsible nav without using LESS. I haven't made it around to using LESS with bootstrap yet, I'm just using regular CSS. It seems that nothing I do will trigger the navbar to collapse. I'm trying to collapse it at anything smaller than 950px across.
Any ideas? I can't find any posts that refer to regular CSS doing what I need.
You can use this CSS to change the breakpoint of the navbar..
#media (max-width: 950px) {
.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;
}
}
Working demo: http://bootply.com/105174
I want to collapse my navbar in earlier resolution than 768px, for example 992px, how would I do that? thanks! (I know I can customize it on the bootstrap page, but I don't want to start my project over again with new bootstrap.css file)
If you don't want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me:
#media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
}
Demo: https://jsfiddle.net/0pmy8usr/
Add this in a separate CSS file and include it after bootstrap.css
UPDATE for Bootstrap 4:
#media(max-width:900px) {
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar-toggler {display: block !important;}
.navbar-toggleable-sm.collapse {display:none !important}
.navbar-toggleable-sm.collapse.in {display:block !important}
}
Demo: https://jsfiddle.net/mkvhbgnp/3/
In variables.less, change
#grid-float-breakpoint: #screen-sm-min
to
#grid-float-breakpoint: #screen-md-min;
If you need to collapse your navbar in earlier resolution than 768px so you will need to use #media min-width and max-width, and you don't need to start new project for doing that simply create new .css file ( example: custom.css) and inset it under your main bootstrap.css to override its values. and write this code inside it :
CODE:
#media (min-width: 992px) {
.collapse {
display: none !important;
}
}
Also, you can have a look at this post: change bootstrap navbar collapse.
I hope this will give you the solution.
You can also override the bootstrap classes that close the gap. Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.
#media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.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;*/
margin: 7.5px 50px 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;
}
}
click here for the live demo code
The solution is actually very simple. Use .navbar-expand-lg or .navbar-expand-xl class with <nav> tag.
Example :-
<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
</nav>
Thank you all.
I would suggest bringing in bootstrap into your project in lieu of a CDN and simply look for the media query that looks like this:
#media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; //...etc.
And change it to:
#media (min-width: 900px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; // ...etc.
Or if you are using a CDN, create an override to that specific media query.
If you want it is menu to be collapsable from medium devices
You can directly do by
toggleable="md"
Else you can go for other force collapsable approach by setting sccs/ less of bootstrap.
i want to set my bootstrap navigation as responsive in any width that i want. For example in 1200 pixels width it should act like normal navigation but in 1110 pixels width; i want to set menu to go responsive. I tried to make it with jquery but no response. Is there anyway to do that?
You can override the default Bootstrap navbar toggle threshold using a CSS media query like this..
#media (max-width: 1110px) {
.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://bootply.com/98488
(this example uses 1280, but you can change it to 1110 to see the navbar collapse)