Hi,

I have a menu item in a navbar that has a dropdown and a submenu under it. It works fine when the navbar is not collapsed, but when the navbar is collapsed, it still responds to the hover state. This still works ok when using a desktop browser to simulate a smaller device, but doesn't work well on an actual device. It seems like a dropdown menu in a collapsed navbar should only respond to clicks, since a mobile device will probably not have the ability to hover, in general.

I'm not sure if this is an issue with Bootstrap, my particular code/css, or in this module's bootstrap implementation.

For reference, I have a standalone (non-drupal) page using bootstrap3 and it does not seem to do this. On my stand-alone page, the dropdown responds to hover and click events when the navbar is not collapsed, but when the navbar is collapsed, the dropdown only responds to clicks.

I see some reference to a similar issue here: https://github.com/CWSpear/bootstrap-hover-dropdown/issues/11 but that appears to be for bootstrap 2, and looks like it was fixed.

Any ideas?

Comments

meecect’s picture

As a folloup, I should point out that these menu items are in a custom block and in my page template as well. They are not a 'drupal menu', if that makes any difference.

I was perusing the issue queue and noticed a fair number of people with similar issues, but most seemed to be focused on how to get dropdowns to work on drupal menus.

meecect’s picture

I believe I found the issue. The theme I was using was a legacy theme based on twitter_bootstrap but had a lot of custom styling. It turns out that the dropdown was just appearing because of a :hover style on the .dropdown element. So, while I was wasting hours trying to track the event listener, it turned out to be a simple css issue.

anyway, problem solved.

meecect’s picture

Status: Active » Closed (works as designed)