Maintain expand/collpase of responsive navbar dropdowns #3184

ghost opened this Issue Apr 22, 2012 · 31 comments


None yet
ghost commented Apr 22, 2012

I want to use the bootstrap navbar for a lot of submenus and sadly they all expanded when the responsive styles kick in.

I dont know it this is on Purpose, but its annyoing for mobile users to have to scroll to all submenu entries. I would like to have them collapse and expand only on click/touch-

I would like to have the menu just expand on click and don't use the popus for mobile mode, would be glad if somebody could explain how to do that. I am not into javascript very much. In the meantime i try to figure it out myself.


I agree with that. But the example you gave does not work for me (Chrome 18 W7 64bit).

quamen commented Apr 23, 2012


It makes no sense to suddenly expand drop down menus on a mobile where screen real estate is at a premium.


๐Ÿ‘ as well. In the meantime, anyone know a manual way around this?

ghost commented May 1, 2012

I found nothing so far.

ghost commented May 11, 2012

@christophermina Hmm? I not tryed it yet but just by reading it. The question and the solution seems to prevent it to collapse. I (we) wan't the exact opposite we wan't to force it to collapse! Bootsrap expands the submenus in mobile view!

so my question is: are you not getting it or me?


@nico023 The solution posted satisfies your needs. Please take another look at the solution and try implementing it. I noticed I made a typo in my post, I meant to say the dropdown will NOT expand.

ghost commented May 11, 2012

@christophermina Oh thats great thank you very mutch!

Hope sometime this behavior will be default


@nico023 It's really simple:
find ".nav-collapse .dropdown-menu" in bootstrap-responsive.css (around line 749) and change "display:block" to "display:none"

That's it! (well, almost...)

ghost commented May 13, 2012


why the display: none now? I just figured I totally forgot the :not([data-no-collapse="true"]) changes in the css. well 7 places you say? feels hacky but i will try it



@lepascalou That works to collapse them when the slide down is first clicked, but the ones that are collapsed should expand when touched/clicked upon. How would one accomplish that?


@underparnv Instead of "display:none", just comment out (or delete) the line. The workaround I suggested before was in combination with css dropdown. I just tested it on default bootstrap collapsed navbar, it seems working.


@lepascalou Almost working with that one. When you expand the drop downs from the "mobile" view, the nav-collapse doesn't expand to allow you to view more the menu that is expanded...effectively hiding the stuff you just expanded. Here is a JSFiddle to show what the heck I'm talking about as I suck with like words and stuff. :)



Please see:

Search for ".nav-collapse,.nav-collapse.collapse{overflow:hidden;height:auto;}" at the bottom of css. I replaced "height:0;" with "height:auto"


Awesome! THANK YOU! :)

Ninja Edit How would I prevent the navigation from being shown on page load?


fwiw ... Debugged 2.3.x Android, you must have -webkit-transform: none !important; as an inline style (or css class) override for <div class="nav-collapse collapse">... navbar and menu stuff here ...</div>.


Also you can do something like this for Android 2.3.x to fix the collapse issue:

$(function() {
  $('.btn.btn-navbar').live('click', function() {
benp commented Jun 15, 2012

Hmm... That's exactly what I'm trying to do but can't get any of the solutions to work for me :/ Which part exactly would I need to change in either bootstrap.css and/or bootstrap-responsive.css? Thanks if anyone can clarify.


You might need to edit component-animations.css||less stylesheet and add height: auto !important; to the { ... } selector.

benp commented Jun 24, 2012

Thank you niftylettuce - finally got it to work :)


Awesome. Glad it helped @benp. ๐Ÿ‘


this does cause an issue with the height not being smooth on open, the transition does not occur with this fix


Here is the fix for you guys:

$('.nav-collapse a[data-toggle]').click(function() {
  $('.nav-collapse').css('height', '100%');

It can be refined according to your setup.

mdo commented Jul 24, 2012

We're revisit this in 2.2.


@niftylettuce @benp and @underparnv - Just ran across this issue for my site that I am developing. I need to make the site mobile friendly, but I also have a lot of drop downs in my main navbar.

I have created a Fiddle to show my current setup here:

My issue is the same as your "Ninja Edit" @underparnv - The nav is visible as soon as the page is loaded. I want it to be hidden until the 3-line button is pressed.

Can you help?




This is fixed by changing the navbar toggle from a link to a button element. Tested on ipad2, iphone4 and newest android.


Thanks @abbajbryant will try that tonight when I get back to my laptop, and let you know.

mdo commented Aug 19, 2012

Relabeling this as a JS issue as it would involve recalculating the height of a collapsed element and not any particular CSS changes.


fine work, gratz!

but I have 3 or more level deep navigation menu. When i choose a option at second level, are showing all 3 or below levels of your choices.

isn't work at third or below levels? :(

fat commented Aug 27, 2012

Hey @nico023,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

  • should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.


@fat fat closed this Aug 27, 2012
mrto2 commented Oct 27, 2012

This fiddle ( ) is the solution for this problem but the question is How to work with this solution with bootstrap 2.1.1 ?

@cvrebert cvrebert locked and limited conversation to collaborators Jun 14, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.