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
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've got this problem. Bootstrap 3 framework changes my navbar into collapsible version (mobile version) when it reaches 767px screen wide. I would like to change it that mobile version exists until 991px. I've seen a similar question but the correct answer is unusable for me. It says that it can be set up while downloading custom version of Bootstrap, putting required value for collapsible navbar. The problem is, I use it with Drupal 7 and the Bootstrap version is provided autamtically form this url: netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css.
So I have to override this value in my custom css file, but I've know idea what to change - I believe there are many of classes to change. By the way, it might be important, I don't use LESS version.
Regards,
David
You can override it like this..
#media (max-width: 990px) {
.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/105915
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)
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.