Main Nav: Sub-menu items active and hover states getting "stuck"

Support
#1

As the title states, for one of my primary nav items, the active and hover states aren’t behaving.

I’ve uploaded screenshots to demonstrate.

My site: https://optimizeyourself.me
Problem: https://optimizeyourself.me/starthere/

What I think is happening is that the default rollover behavior for menus like this is to highlight the current page. In this case, 4 of the sub-menu items are named anchors for the same page. So, it does make sense for them be red (highlighted).

However, we WANT the behavior for those items to only ‘light up’ on hover/click. Is it possible to use “one pager” behavior or something like that to get the outcome we want?

#2

Hi there,

Thanks for writing in.

Please add this CSS to your global custom CSS.


    .desktop .sub-menu .current-menu-item>a[href*="/#"] {
     color: #fff !important;   
    }

That should do it, cheers!

1 Like
#3

That did the trick! Thank you so much.

I also added for hover states this:
.desktop .sub-menu .current-menu-item>a[href*="/#"]:hover {color: #CC0000 !important;}

#4

You are most welcome. :slight_smile: