Things You Might Not Know About Bootstrap Menus

Designers.

"I want that menu to drop down on hover; people shouldn't have to click it."

Well, we can fix that, can't we.

@media (min-width: 768px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

Voila. Dropdown on hover.

"And the top item should click through to one of the pages; I don't want a dummy do-nothing menu link on my beautiful award-winning design!"

Well, we can sort of make that happen, too, can't we.

$('.dropdown-toggle').click(function() {
    var location = $(this).attr('href');
    window.location.href = location;
    return false;
});

"And it should work right in the mobile menu, too! The user should be able to click that top level item straight through. But the menu shouldn't be dropping down on hover at mobile size, it should work the way it did before and only show the second level choices when the user clicks open the link."

Uhhhhh. It can't do that.

"It needs to be the same! Desktop size, and mobile! Except different."

It can't. How's it supposed to know if the user wants to click through to the new page, or wants to drop down those second level choices?

Usually about this time you can hear the sound of eyes glassing over on the other end of the line.

But it can't. Dropdown on hover and click through the top link might work okay at desktop size when the user can see them both and choose with a mouse click, but that's not going to work on a closed vertical mobile menu and stubby fingers doing the walking.

Lots of pages of proposed solutions to this on the Internet, including some fantastical complicated jquery, but I still have not found the one that really solves that problem of one link needing to read minds and take just one of the two possible actions. At least not for basic Bootstrap menus.

So here's ours. Our final solution was just to create a hidden extra link in that dropdown submenu that duplicates the top level item, but only shows up at mobile size, and turn off that click through function for the top item at mobile size.

So now the HTML looks like:

<li class="dropdown">
    <a href="x.html" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> 
    <ul class="dropdown-menu">
        <li class="mobile-only"><a href="x.html">About Us</a></li>   
        <li><a href="y.html">How Great We Are</a></li> 
        <li><a href="z.html">Our History</a></li> 
    </ul> 
</li>

And the CSS becomes:

@media (min-width: 768px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
  .mobile-only {
	  display: none;	
  }
}

And that jquery becomes:

$('.dropdown-toggle').click(function() {
    if ($(window).width() > 768)
    {
    	var location = $(this).attr('href');
    	window.location.href = location;
    	return false;
    }
});

Which is about the simplest way I've found to solve this problem.