How to Enable Bootstrap 3 Hover Dropdowns

I love Bootstrap, but I'm not really a fan of the navigation it creates. It works really well when you're prototyping, but if you're doing a high-level design project, you're better off going custom. Bootstap's default navigation doesn't have out-of-the-box hover dropdowns, and the mobile menu is arguably pretty boring. If you do use it though, there are some tricks to help you tweak it without going completely custom.

Some clients, sites, or apps will require you to have hover dropdowns on desktop. As you can see below, this doesn't come out-of-the-box with Bootstrap 3.

You can easily add hover dropdowns with the following CSS:

@media only screen and (min-width : 768px) { /* Make Navigation Toggle on Desktop Hover */ .dropdown:hover .dropdown-menu { display: block; } }

The CSS above makes the dropdowns show all on its own, but it doesn't take you to the parent link (in this case reddit.com) when clicked. Although not the most elegant solution, here's some JavaScript (jQuery) that can help you achieve that:

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

Now, here's an example of the navigation modified with the changes:

On most of my projects, I have dropped using the default navbar completely (including trying to modify it like the above example). Instead I tend to build my own, and I've recently became a huge fan of Off Canvas Menus. I highly recommend you check and try it out!