Get rid of the square "boxes" in menus

The menu can be changed so that it makes the links orange instead of the background when a menu item is hovered over or is the current page.

There’s just one caveat. For technical reasons, the CSS needs to be added with the Simple Custom CSS plugin instead of the Custom CSS section in the Customizer.

Also, the CSS looks insane, but it works perfectly ??

#menu-primary-items .current-menu-item > a, #menu-primary-items .current_page_ancestor > a, #menu-primary-items .current_page_item > a, #menu-primary-items .current_page_ancestor > a, .menu-unset ul .current-menu-item > a, .menu-unset ul .current_page_ancestor > a, .menu-unset ul .current_page_item > a, .menu-unset ul .current_page_ancestor > a, .menu-primary-items a:hover, .menu-primary-items a:active, .menu-primary-items a:focus, .menu-unset ul a:hover, .menu-unset ul a:active, .menu-unset ul a:focus, .menu-primary-items ul a:hover, .menu-primary-items ul a:active, .menu-primary-items ul a:focus, .menu-unset ul ul a:hover, .menu-unset ul ul a:active, .menu-unset ul ul a:focus {
  background: white;
  color: #e6a117;
}

Thanks ! I’ll try that later this evening. I guess I can use any color in the last line instead of orange ?

Also can I use other more recent plugins for the custom css ? Or does it have to be Simple Custom CSS ? Last update was & year ago.

Thanks, your “insane” code does work great with Simple Custom CSS. Except for the sub-menus : they disappear. Seems like the chosen color, be it orange or anything else, doesn’t apply to them.

Hmm ok it applies correctly on my test site. Could you share a link to your site with the CSS active? I should be able to find out what’s going wrong once I see it.

Will do tomorrow. Thanks !

So here is what I already have in the Ignite custom CSS. You gave me this code as I was trying to get rid of the activated state in the widget links.

a {
text-decoration: none;
}
a,
a:link,
a:visited,
.widget a,
.widget a:link,
.widget a:visited {
color: #757575;
}
a:hover,
a:active,
.widget a:hover,
.widget a:active {
color: #b7b7b7;
}

I took off these lines and it doesn’t change anything so far. submenus are still invisible when you hover them.

I forgot :

michelbenita.com

To be precise I also tried removing all of my custom css, no luck.

Hi
The white color on hover is due to this

.menu-primary a:hover, .menu-primary ul ul a:hover { color: white;}
so if you add it to ur custom css and change the color u want it will work

Thanks for your help but no luck, neither in the theme’s custom CSS or using the plugin.
In Ben’s code, the background is white, not the color.

Hey, thanks ! Finally it works great. I just added the missing elements to Ben’s code:

.menu-primary a:hover, .menu-primary ul ul a:hover

It took me some more time to really understand what you meant. ??

great, glad it worked out ??

So topic resolved ??