New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maintain expand/collpase of responsive navbar dropdowns #3184

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

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

This comment has been minimized.

Show comment
Hide comment
@MGaetan89

MGaetan89 Apr 22, 2012

Contributor

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

Contributor

MGaetan89 commented Apr 22, 2012

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

@quamen

This comment has been minimized.

Show comment
Hide comment
@quamen

quamen Apr 23, 2012

👍

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

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

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev Apr 24, 2012

👍 as well. In the meantime, anyone know a manual way around this?

arenowebdev commented Apr 24, 2012

👍 as well. In the meantime, anyone know a manual way around this?

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost May 1, 2012

I found nothing so far.

ghost commented May 1, 2012

I found nothing so far.

@christophermina

This comment has been minimized.

Show comment
Hide comment
@christophermina

christophermina commented May 9, 2012

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

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

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

This comment has been minimized.

Show comment
Hide comment
@christophermina

christophermina May 11, 2012

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

christophermina commented May 11, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost May 11, 2012

@christophermina Oh thats great thank you very mutch!

Hope sometime this behavior will be default

ghost commented May 11, 2012

@christophermina Oh thats great thank you very mutch!

Hope sometime this behavior will be default

@lepascalou

This comment has been minimized.

Show comment
Hide comment
@lepascalou

lepascalou May 12, 2012

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

lepascalou commented May 12, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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

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

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev May 17, 2012

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

arenowebdev commented May 17, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@lepascalou

lepascalou May 18, 2012

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

@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

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev May 18, 2012

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

arenowebdev commented May 18, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@lepascalou

lepascalou May 18, 2012

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"

lepascalou commented May 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev May 18, 2012

Awesome! THANK YOU! :)

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

arenowebdev commented May 18, 2012

Awesome! THANK YOU! :)

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

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce May 30, 2012

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 commented May 30, 2012

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

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce May 30, 2012

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();
  });
});

niftylettuce commented May 30, 2012

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

This comment has been minimized.

Show comment
Hide comment
@benp

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

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

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Jun 21, 2012

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

niftylettuce commented Jun 21, 2012

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

@benp

This comment has been minimized.

Show comment
Hide comment
@benp

benp Jun 24, 2012

Thank you niftylettuce - finally got it to work :)

benp commented Jun 24, 2012

Thank you niftylettuce - finally got it to work :)

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Jun 25, 2012

Awesome. Glad it helped @benp. 👍

niftylettuce commented Jun 25, 2012

Awesome. Glad it helped @benp. 👍

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Jul 12, 2012

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

niftylettuce commented Jul 12, 2012

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

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Jul 12, 2012

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.

niftylettuce commented Jul 12, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 24, 2012

Member

We're revisit this in 2.2.

Member

mdo commented Jul 24, 2012

We're revisit this in 2.2.

@tip2tail

This comment has been minimized.

Show comment
Hide comment
@tip2tail

tip2tail Aug 15, 2012

@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

tip2tail commented Aug 15, 2012

@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 comment has been minimized.

Show comment
Hide comment
@abbajbryant

abbajbryant Aug 16, 2012

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

abbajbryant commented Aug 16, 2012

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

@tip2tail

This comment has been minimized.

Show comment
Hide comment
@tip2tail

tip2tail Aug 16, 2012

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

tip2tail commented Aug 16, 2012

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 19, 2012

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@cmrevoredo

cmrevoredo Aug 19, 2012

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? :(

cmrevoredo commented Aug 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@fat

fat Aug 27, 2012

Member

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!

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!

@mrto2

This comment has been minimized.

Show comment
Hide comment
@mrto2

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

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 ?

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