WordPress Bootstrap top menu Fix fixes the bootstrap top menu item to click to a page instead of just showing the drop down. This is actually being used on this site. So if you have Firefox, Chrome or Brave you can see what was done with the website editing tools those browsers have. This was done with jQuery and the CSS that is built into the WordPress + Bootstrap 4 theme.
To see the jQuery code for this site making this possible Click here.
The steps are pretty simple. First you need to change the page href with:
jQuery(document).ready(function() {
/****** #menu-item-dropdown-255 is LINUX menu item ******/
jQuery("#menu-item-dropdown-255").click(function(){
window.location = '/linux/';
});
Now your top tier menu will click to page instead of # or nothing.
Next step use the jQuery mouseenter and mouseleave functions to on the top tier menu id attribute as follows:
jQuery("#menu-item-dropdown-255").mouseenter(function(){
jQuery("[aria-labelledby='menu-item-dropdown-255']").show();
jQuery("[aria-labelledby='menu-item-dropdown-259']").hide();
jQuery("[aria-labelledby='menu-item-dropdown-265']").hide();
});
jQuery("#menu-item-dropdown-255").mouseleave(function(){
jQuery("[aria-labelledby='menu-item-dropdown-255']").delay(5000).fadeOut("slow");
});
Time delay is used to hide the dropdown menu. This requires that when you navigate to a new menu you need to remove the other dropdown menus for better elegance.
What we have to do is grab the <ul> by the attribute aria-labelledby instead of by the id attribute. Then life is good! Your dropdown shows on mouseenter and leaves on mouseleave.
Advantage to the solution is that you do not need to edit the PHP code for the bootstrap theme avoiding the issue of having to update it every time the theme updates. The disadvantage is that you have to dig under the hood and create this code for any top tier menu item that has a dropdown under it. Click here to see actual code for this site.
Happy coding! Hope you found my WordPress Bootstrap top menu fix solution useful!