[Resolved] Exclude menu sub-items from css class of parent menu item?

[Scott M]

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.

[Fernando]

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. 🙂

[Scott M]

worked great, thanks!

[Fernando]

You’re welcome Scott! Glad that worked! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Author]

Posts