Archived topic
Exclude menu sub-items from css class of parent menu item?
3 replies · Started by Scott M on March 23, 2022
Sub-items are inheriting the css class of their parent navigation item. I tried searching for solutions in this forum but none seemed to work for my site. I have the main items on the navigation menu appearing as buttons that hover transform with mouse-over. I just want a plain list (no hover) with a background color for the sub-items in the menu. Between the customizer and different CSS approaches, I haven't been able to get anything to work. Temporarily, I have applied a different CSS class to the sub-items and that worked to change the colors, but they still inherit the hover transform from the main menu.
Hi Scott,
The issue is occurring because the CSS selector selects all <a> elements within li.nav-button for one of the CSS codes you have. Altering this should work.
With that said, can you kindly edit this code found in Appearance > Customize > Additional CSS?:
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover{
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
color: #000000;
}into something like this:
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button > a:hover{
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
color: #000000;
}Kindly let us know how it goes. :)
worked great, thanks!
You’re welcome Scott! Glad that worked! Feel free to reach out anytime if you’ll need assistance with anything else. :)
