Boostrap navbar opens on hover with clickable parent

The bootstrap navbar hover post is one of the most visited blogposts of this blog. Recently I got a questions about this on Twitter by @wang_jina, who wanted to know how to open the bootstrap navbar dropdown menu’s on a hover event but keeping the parent clickable. Time for an update!

Dropdown menu opening on hover

When getting more experience with this matter, the code gets further adjusted. Also showing the dropdown when hovering got changed a bit. The window can now be resized and it no longer uses the click trigger but directly shows or hides the dropdown menu so effects or animations can be added.

$(document).ready(function() {
	function bindNavbar() {
		if ($(window).width() > 768) {
			$('.navbar-default .dropdown').on('mouseover', function(){
				$('.dropdown-toggle', this).next('.dropdown-menu').show();
			}).on('mouseout', function(){
				$('.dropdown-toggle', this).next('.dropdown-menu').hide();
			});
		}
		else {
			$('.navbar-default .dropdown').off('mouseover').off('mouseout');
		}
	}
	
	$(window).resize(function() {
		bindNavbar();
	});
	
	bindNavbar();
});

The bindNavbar function is called when the script is initialized and when the window is resized.

Keep the parents clickable

The only thing we need to add is to keep the parents clickable. This means we need to catch the click event on the dropdown-toggle. We only need to follow the href when the dropdown-menu below it, is visible. So let’s code this approach:

$('.dropdown-toggle').click(function() {
	if ($(this).next('.dropdown-menu').is(':visible')) {
		window.location = $(this).attr('href');
	}
});

Final script

This code should be added to the bindNavbar function and only should be triggered when the navbar dropdown menu’s are opening when hovered:

$(document).ready(function() {
	function bindNavbar() {
		if ($(window).width() > 768) {
			$('.navbar-default .dropdown').on('mouseover', function(){
				$('.dropdown-toggle', this).next('.dropdown-menu').show();
			}).on('mouseout', function(){
				$('.dropdown-toggle', this).next('.dropdown-menu').hide();
			});
			
			$('.dropdown-toggle').click(function() {
				if ($(this).next('.dropdown-menu').is(':visible')) {
					window.location = $(this).attr('href');
				}
			});
		}
		else {
			$('.navbar-default .dropdown').off('mouseover').off('mouseout');
		}
	}
	
	$(window).resize(function() {
		bindNavbar();
	});
	
	bindNavbar();
});

Example

A working example of this code can be found at: BootPly.

6 Replies to “Boostrap navbar opens on hover with clickable parent”

  1. Try this:

    $(document).ready(function() {
    function bindNavbar() {
    if ($(window).width() > 768) {
    $('.navbar-default .dropdown').on('mouseover', function(){
    $('.dropdown-toggle', this).next('.dropdown-menu').show();
    }).on('mouseout', function(){
    $('.dropdown-toggle', this).next('.dropdown-menu').hide();
    });
    $(".dropdown-toggle").prop("disabled", false);
    }
    else {
    $('.navbar-default .dropdown').off('mouseover').off('mouseout');
    $(".dropdown-toggle").prop("disabled", true);
    }
    }

    $(window).resize(function() {
    bindNavbar();
    });

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
    window.location = $(this).attr('href');
    }
    });

    bindNavbar();
    });

  2. Hi!
    I appreciate your solution but have found one missing thing: When tapping the parent on a touch device it no longer opens the dropdown. Any idea how to solve this?

  3. Sorry, I have to specify: I mean tapping a parent menu in the desktop version of the navigation on a touch device.

Leave a Reply

Your email address will not be published. Required fields are marked *