Navwalker Parent Menu not clickable. How to make Navwalker open Sub-menu on hover instead of onClick

So I Installed https://github.com/MWDelaney/sage-bootstrap4-navwalker and whenever I have a parent element with like sub-menu elements, the parent Menu item is not really clickable, it show it has a URL but when you click on it instead of taking you to that URL it just opens the dropdown sub-menu . I know this is likely because I have the navwalker open the dropdown sub-menu when clicking instead of when hovering. How could I change it so instead of the dropdown sub-menu opening on the click it just opens on Hover?

This might be solution for your query,

Even you can do minor change in #NavWalker library to open #dropdown on hover.

Open ‘class-wp-bootstrap-navwalker.php’ file,
Find if condition with “0 === $depth && $args->depth > 1”, and change code based on your needs.

Like, $atts[‘href’] = !empty($item->url)? $item->url : ‘#’;

Hope it helps…

It did but it didn’t fix the problem entirely. It did add the hover effect so the submenu opens when you hover OR click over the Parent item (in this case the menu item called Service). However, this is the weird part. If I go to the WP admin and change the Menu so the Menu item doesn’t have sub-items, the link to the page type works. ISo Service is a post type that I have, so if you add the menu item Page -> Service (With NO sub-items) the URl works so you will see www.site.com/service/. The weird part is that as soon as you add the sub-item through Wordpress BAckend (Dashboard - Menu) the parent Item has a URL of www.site.com/# but the sub-items have the right URL… Any ideas on why this could happen?

In this case, only hover can open your submenu.
You can try with css,

.dropdown:hover .submenu {
display: block;
margin-top: 0;
}

Or with the help of JS,

$(’.dropdown’).hover(function(){
$(’.dropdown-toggle’, this).trigger(‘click’);
OR
$(this).find(’.submenu’).addClass(‘active’);
});

Basically you have to play with JS & CSS both…

Best Of Luck…:+1:

1 Like

I’d recommend using Navi by Brandon (@Log1x ):

It takes the pain out of creating walkers, and makes it much easier to style using css and js.

This topic was automatically closed after 42 days. New replies are no longer allowed.