Fixing the Divi Sub Menu Hover Colors on Single Page Layouts

Written by Dan Mossop

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:

Unlock the Full Potential of Shortcodes in Divi!

Empower your Divi site with the Divi Shortcode Enabler. This plugin allows shortcodes to run effortlessly in various Divi module fields, enhancing functionality and customization across your site.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

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.