How to Get Bootstrap Dropdown Menu to Show on Hover
POSTED June 30, 2015

How to Get Bootstrap Dropdown Menu to Show on Hover

I’ve been using Bootstrap for some time now, and absolutely love developing new sites and themes using the framework. However upon occasion there are some core functions that sometimes need alteration, and one of those is often the dropdown navigation menu.

By default Bootstrap will only show the navigation menu when the parent menu item is clicked, this is great if a parent item is a button as the users first instinct is to perform a click. However, when it comes to navigation we’ve all became quite accustomed to the hover effect.

There are several ways you can tackle this, and one of the most simple methods I use is to simply trigger a click action when the parent item gets hovered. To achieve this all is required is a simple piece of jQuery.

First, go take a look at the sample code for Bootstrap’s navigation menu and get to grips with how it’s structured. Then, add this simple piece of jQuery below to ┬ámake the drop-down show on hover.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][js light=”true”]<script>
$(‘.dropdown’).hover(function() {
$(‘.dropdown-toggle’, this).trigger(‘click’);

The code above assumes that your parent LI has the class “dropdown” assigned to it which then when hovered will trigger a click, which then triggers the default Bootstrap dropdown. [/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]


Discuss this article


Submit a Comment