[Resolved] CSS Menu Toggle Issue

Home Forums Support [Resolved] CSS Menu Toggle Issue

Home Forums Support CSS Menu Toggle Issue

  • This topic has 5 replies, 3 voices, and was last updated 5 months ago by Fernando.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2156008
    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?

    #2156019
    Ying
    Staff
    Customer Support

    Hi Brent,

    Try this:

    .menu-toggle:hover .gp-icon svg {
        fill: yellow;
    }
    #2156025
    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?

    #2156027
    Ying
    Staff
    Customer Support

    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;
    }
    #2156050
    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?

    #2156072
    Fernando
    Customer Support

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.