Summary : When the navbar is collapsed, its content gets fixed height style so there is no room for submenus to be visible. When not collapsed, navbar is working as intended. Problem does not appear with Bootstrap outside Drupal.

Symptoms : Let me illustrate. Here is my Primary menu hierarchy :

Menu 1
- Item 1.1
- Item 1.2

"Show as expanded" is checked for "Menu 1" link. jQuery 1.7 is in use. This was tested in a sandbox.

When navbar is collapsed and after clicking the navbar toggle button, "Menu 1 (caret)" appears. When subsequently clicking "Menu 1", "Item 1.1" and "Item 1.2" fails to appear.

Explanation : When clicking the toggle button, the div.nav-collapse containing the nav element gets a fixed height inline style. I noticed Bootstrap outside Drupal instead sets "height: auto" on this div so when submenus are displayed, total menu height is augmented.

Proposed resolution : Maybe change the way div.nav-collapse height is calculated. I don't know where to do that.

CommentFileSizeAuthor
#3 1902206.patch509 bytesTrentHouliston

Comments

TheJoker’s picture

TheJoker commented

I confirm this problem. I wanted to create a theme but the author was ahead of me. Perhaps the problem of additional libraries to theme Bootstrap.

TrentHouliston’s picture

TrentHouliston commented

This problem only occurs on the first opening of the menu. On every subsequent opening it correctly sets itself to height:auto

EDIT:
After some investigation, it seems that (on chrome and firefox at least) the webkitTransitionEnd and the equivalent firefox event, is not being fired (or at least is not bound in the first place)

TrentHouliston’s picture

TrentHouliston commented
StatusFileSize
new 1902206.patch509 bytes

I found the problem, the change from the fixed height to height:auto is dependant on the class "collapse" existing as well as nav-collapse.

I have submitted a patch with a fix

TrentHouliston’s picture

TrentHouliston commented
Status: Active » Needs review
natted’s picture

natted commented
Status: Needs review » Fixed

Trent,

Thanks for submitting a patch. I think you are correct, I checked the Bootstrap docs and tested your patch. It appears to solve the issue.

Committed to 2.x-dev

TheJoker’s picture

TheJoker commented

Thanks! It works.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.