Maintain expand/collpase of responsive navbar dropdowns #3184

Closed
ghost opened this Issue Apr 22, 2012 · 31 comments

Projects

None yet
@ghost
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.

@MGaetan89
Contributor

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

@quamen
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.

@arenowebdev

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

@ghost
ghost commented May 1, 2012

I found nothing so far.

@ghost
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?

@christophermina

@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
ghost commented May 11, 2012

@christophermina Oh thats great thank you very mutch!

Hope sometime this behavior will be default

@lepascalou

@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
ghost commented May 13, 2012

@christophermina

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

thanks

@arenowebdev

@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?

@lepascalou

@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.

@arenowebdev

@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. :)

http://jsfiddle.net/nczJF/

Thanks!

@lepascalou

Please see:

http://jsfiddle.net/nczJF/1/

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

@arenowebdev

Awesome! THANK YOU! :)

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

@niftylettuce

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>.

@niftylettuce

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

$(function() {
  $('.btn.btn-navbar').live('click', function() {
    $('.nav-collapse').toggle();
  });
});
@benp
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.

@niftylettuce

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

@benp
benp commented Jun 24, 2012

Thank you niftylettuce - finally got it to work :)

@niftylettuce

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

@niftylettuce

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

@niftylettuce

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
Member
mdo commented Jul 24, 2012

We're revisit this in 2.2.

@tip2tail

@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: http://jsfiddle.net/tip2tail/rCgA8/

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?

Thanks,

tip2tail

@abbajbryant

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

@tip2tail

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

@mdo
Member
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.

@cmrevoredo

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
Member
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.

thanks!

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

This fiddle (http://jsfiddle.net/nczJF/1/ ) 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.