[Resolved] CSS Menu Toggle Issue

[Brent Wilson]

I seem to be running into an issue with some CSS.

The issue is the mobile menu toggle on this page: https://wordpress-483838-2431328.cloudwaysapps.com/camp-meetings/2021-camp-meeting/

Here is the CSS code I am applying to the header on this particular page via a hook element:

<style>
	nav#site-navigation {
		background-color: #7309d0;
}
	nav#sticky-navigation {
    background-color: #7309d0;
}
	.main-navigation.toggled .main-nav ul.menu {
    background-color: #7309d0;
}
	#site-navigation a {
	color: #ffffff;
}
	#menu-main-menu a:hover {
		color: #e7e7e7;
}
	#sticky-navigation a {
		color: #ffffff;
}
	#site-navigation .menu-toggle {
	color: #ffffff;
}
	#site-navigation .menu-toggle:hover {
	color: #000000;
}
</style>

The mobile toggle is showing white as specified in the second from the last line of code. But the hover color doesn’t seem to be working.

In addition, is there anything I should be doing to consolidate this code at all? Or is it good as is?

[Ying]

Hi Brent,

Try this:

.menu-toggle:hover .gp-icon svg {
    fill: yellow;
}

[Brent Wilson]

Okay, that worked.

So why does #site-navigation .menu-toggle with color work for setting the non-hover color, but not for setting the hover color? Should I use .menu-toggle .gp-icon svg with fill for the non-hover color?

[Ying]

It would if you don’t have this CSS in customizer > additional CSS:

/*Hamburger menu white on hover*/
#site-navigation .menu-toggle:hover {
	color: #ffffff;
}

[Brent Wilson]

Okay, so because of that css in additional CSS, would I need !important on my original code to override it? Does code in Additional CSS have a higher priority than CSS style in a hook element?

[Fernando]

Hi Brent,

I don’t think that would work as well. The color rule isn’t working because there’s already a fill rule set in your svg. Specifically this one:

.menu-toggle:hover .gp-icon svg {
    fill: #e7e7e7;
}

Even if you place !important on a color rule, the fill would still take precedence of the color rule.

Therefore, your code should be targeting the svg and changing its fill to override the current CSS you have:

#site-navigation .menu-toggle:hover .gp-icon svg {
	fill: #000000;
}

#site-navigation .menu-toggle .gp-icon svg {
	fill: #be1212;
}

With regards to your other question, Additional CSS has higher precedence than a Hooked style through a Hook Element.

Hope this clarifies. 🙂

[Author]

Posts