1

I have built a custom wordpress theme based on the bootstrap for wordpress version and I am trying to make the dropdown nav bar open on hover instead of on click.

I have found this answer here but it seems it addresses the original (none wordpress) bootstrap. Either that or It is just unclear to me how to implement it, but It looks like it is just different for wordpress.

I have almost managed to do it by replacing "click" with "hover" in the bootstrap-dropdown.js file but then I can't actually move the mouse to the submenu items as the dropdown disappears as soon as I move the cursor and the dropdown doesn't stay open.

Ideally it will be on hover for desktop and still on click for mobile but that is not a must. i'll sacrifice click on mobile for hover on desktop.

If anyone can help with this, that would be awesome.

Community
  • 1
  • 1
James
  • 193
  • 3
  • 11

3 Answers3

7

There are three steps to fix this:

1) Just add this code to the bootstrap.css found in Theme -> library -> css -> bootstrap.css

ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;    
}

This is a quick fix just using CSS and not touching the Javascript or JQuery. However this could cause some buggy UI behaviour while you hover the menus.

2) You won't be able to link to the parent category. To fix that go to the functions.php of your theme and remove this on line 417:

class="dropdown-toggle" data-toggle="dropdown"

so your line will be:

$attributes .= '';

3) If you move the cursor too slow from the the parent category to the dropdown menu the menu will close. This is because of a margin that is left. To fix that add this code below the first code in the bootstrap.css:

.navbar .dropdown-menu {
 margin-top: 0px;
}

That's it, your Wordpress Bootstrap theme now should work without clicking the parent category to show the drop down menus.

Carlos Oporto
  • 131
  • 1
  • 3
  • 11
  • Facing similar need to enable clicks on the parent menu item, I discovered it can be achieved by adding 'disabled' to the 'data-toggle' attribute in the anchor elements as such: `menu item` In my case I had to edit the bootstrap walker file (bootstrap-walker.php) where these element were being created. – authentictech Mar 14 '20 at 19:38
1

What I did was add this line to my bootstrap.css near the dropdown stylings:

.dropdown.open .dropdown-menu {
  ..........
/*--- Hover Dropdown Menu---*/
ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;    
}
.dropdown-menu:before {
............

Hope that helps.

LearningRoR
  • 26,582
  • 22
  • 85
  • 150
0

This works for Wordpress Bootstrap:

.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before {
    content: none;
}
Fred K
  • 13,249
  • 14
  • 78
  • 103