Mobile menu hover color

Hi, I’ve added the following code to my website, but the “+” symbols are still pink when I hover over the mobile menus.

@media (max-width: 1199px){

	.main-navigation ul li.current_page_item > a, 
  .main-navigation ul li.current-menu-item > a {
    color: #1F8F70;
  }
  .main-navigation ul li a:hover
	{
        color: #1F8F70;
      }  
}

Hello, can you please provide a link to your website in order to let me check it?

You can use some link shortener if you don’t want to leave the link to your site in this topic.

Kind Regards, Roman.
aThemes Support

The pink ‘+’ has since disappeared with no change to the code, so possibly a cache issue.

However the main menu item is pink when a submenu item is active. How do I make that another color (ex. green).

Hello,

Try to use this CSS code instead of what you’ve mentioned above:

@media (max-width: 1199px) {
    .main-navigation ul li.current-menu-item > a,
    #masthead .main-navigation ul li > a:hover + .subnav-toggle,
    .main-navigation ul li a:hover {
        color: #1F8F70;
    }
}

Kind Regards, Roman.
aThemes Support

When I hover, they are now green. Thanks!

But the main menu items are still pink and not green when a submenu item is active.

Hello,

But the main menu items are still pink and not green when a submenu item is active.

Okay, please try this instead of the previous CSS code:

@media (max-width: 1199px) {
    .main-navigation ul li.current-menu-item > a,
    #masthead .main-navigation ul li.current-menu-ancestor > a,
    #masthead .main-navigation ul li > a:hover + .subnav-toggle,
    .main-navigation ul li a:hover {
        color: #1F8F70;
    }
}

Kind Regards, Roman.
aThemes Support

Yes, that works! Thanks!

1 Like

You are welcome! :slight_smile:

Kind Regards, Roman.
aThemes Support