Fixing the Divi Sub Menu Hover Colors on Single Page Layouts

If you use Divi's single page navigation layout, you may notice some odd behavior from your sub-menus.

For instance, the following example shows the menu after clicking onto the "hours" section of the "Visit Us" page. In this case all of the links are highlighted (as they are all links to the current page), except for the "hours" link which has been marked as visited and is now shown in black. This gives almost the opposite effect of what many people would expect:

To fix this, I added the following CSS:

#top-menu li.current-menu-item > a { color: black !important; }
#top-menu li.current-menu-item > a:hover { color: #2ea3f2 !important; }

This makes all the links default to black, except when hovered on. It's not perfect (in particular, it may be desirable to highlight the currently active page), but it is an improvement on the above:

1 Comment

  1. As always, Dan, this fix "just works". Thanks for solving yet another vexing Divi problem!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.