Archived topic

CSS Menu Toggle Issue

5 replies · Started by Brent Wilson on March 15, 2022

Viewing posts 1–6 of 6

March 15, 2022 at 4:27 pm #2156008

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?

March 15, 2022 at 5:04 pm #2156019

Hi Brent,

Try this:

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

March 15, 2022 at 5:15 pm #2156025

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?

March 15, 2022 at 5:24 pm #2156027

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;
}

March 15, 2022 at 6:17 pm #2156050

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?

March 15, 2022 at 7:04 pm #2156072

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. :)

This archived topic is closed to new replies.

Start building better websites today.