Change the Bootstrap NavBar Breakpoint

Hi Carol. This changes my navbar breakpoint. But when I click menu button it shows menu list an instantly collapse back. So menu doesn't stay open after button is clicked. Is this make any sense? Thanks.

Thanks :)

Did you try the 2nd example (for Bootstrap 3.1)? The .collapse animates in 3.1 so the CSS needs to change.

First of all thank you I'm having a horrible time updating from Bootstrap 2.0 to 3.1

Your code worked perfectly except on the ipad. On the ipad the dropdown is a mess
Example: http://cms.leoncountyfl.gov/eisite/index.asp
Any help would be appreciated

Oh! My ipad needed to be updated. Once I was able to do that it worked perfectly.

THANK YOU!!!!

This is cool, but http://www.bootply.com/120604 is a broken link. This link is supposed to show an update for 3.1.

Thanks!

The link seems to work fine for me?

Worked perfectly. Ended my hour-long search for something that worked. Thank you.

I noticed a bug with it (in Bootstap 3.1.1 at least). Its missing this rule as well in the override:
.navbar-collapse.in {
overflow-y: auto !important;
}
otherwise the menu breaks out of its box if there are too many items whereas the default behaviour is to add a scrollbar. I forked the bootply example here: http://www.bootply.com/ilvJ6ArXTW

Any chance you can say where to change it in a Less variable?

Yay thanks so much, saved my bacon.

Thank you! This was SUPER helpful!!!!

Thanks for this tutorial. How would you need to adjust this CSS so that the nav icon is black when using the standard navbar instead of the navbar-inverse? Example here: http://www.bootply.com/WG0rmcDsJ5

Hi this tutorial is great, everything work well, one problem I am having is that in the mobile view when the nave bar drops down it is not expanding enough to show all the content within, can any one help?

I have added the following as noted above but this does not seem to have solved the problem

.navbar-collapse.in {
overflow-y: auto !important;
}

Example can be found here on my test site : http://www.andyclarkson.com/vape/index.asp

Managed to fix it ... removed the max-height from the .navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:340px} in the bootstrap.min.css. If any one else has this issue

Thank u very much for this great tutorial :). I was stuck in an project and was pulling my hairs before reading this tutorial.

Hmmm...... I tried to copy your example css into my bootstrap css doc and run it, but nothing changed at all. My menu still drops down onto a second line and the wraps onto two lines before finally changing to the collapse menu button.

Yet, when I take just the nav html code and your css and drop it into bootply and run it, hey presto it works! So I'm now at even more of a loss as to why it won't work in my webpage. Anyone care to take a mooch and see if something jumps out at them. I know it'll be something stoopid and me being a noob, but hey, we all have those days........right :p

http://www.bootply.com/VrUzSBScIq#

Hey Guys, It worked for me like a charm but you may wanna add this to in above media query:
.navbar-collapse.collapse.in {
display: block !important;
}

Then it worked perfectly, without it, it was hiding the menu because of display:none!important;

Thanks

Thanks, worked great

Thanks, this was very helpful.

Is there an implementation that will support a Navbar overflow: >>
As the window is re-sized, Navbar items would go to the '>>' dropdown, instead of having an all or nothing collapse? This would be similar to the behavior of Google Chrome's bookmark bar

Thanks for this. I was very helpful. I checked for the word "awesome" in my mental dictionary and I saw your picture by the word.

you can just change the variable @grid-float-breakpoint

ps: version > 3.0

Thanks Carol Skelly

Thanks @jun1st. Exactly what I was looking for!

Thanks!!!!!

How to add multiple breakpoint in navbar ? When we change size of the menu, the menu item will be hidden gradually.

This is not working for me. :( :( :( I had my 3.3.2 Bootstrap

Thanks for sharing this :3

I've question : how to hide navbar after clicking any field on page?? sorry if this a bit confusing,, I'm bad at explaining :( hope you know what I mean

this is not working for me.

The collapse icon and the menu are opening at two different places

Worked for me thanx :)

Thank you--this code worked. The only thing that bothers me is the dropdown menus still show up as pop-out menus instead of being embedded in the list (as they are below 768px). Is there a way to force the dropdown menus to conform to that mobile styling instead of popping up over the rest of the menu? Thanks!

Hi Carol. This changes my navbar breakpoint. But when I click menu button it shows menu list an instantly collapse back. So menu doesn't stay open after button is clicked.

The updated collapsing fix was posted a while ago: http://www.bootply.com/120604

I think I must be missing something.

Do I simply include this at the end of bootstrap.css to overide the original settings & expect it to just work?

...that's what I did & it didn't.

Any help would be much appreciated. Thanks

To anyone that is having the issue of the navbar staying permanently closed, use this CSS. Fixed it for me.

.navbar-collapse.collapse.in{
display: block !important
}

You must also add this to the media query

.navbar-collapse.collapse{
display: none !important;
}

232/5000
Another option is to change the navbar collapse breakpoint variable in the "_variable.scss" file (for those using Bootstrap SASS). Just change the value of variable $grid-float-breakpoint to $screen-md-min !default.

Thanks! This is very helpful! Just wondering, how do you change the screen width at which dropdown menus in the navbar use their mobile/collapsable form? When I click on the drop down menu on my iPad, it still shows the full display version.

incredible, thank you so much!