Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1372136

    This one is probably my fault but I cannot track down where the CSS property is being inherited from and how to prevent that inheritance.

    On a page with the normal header, the mobile menu and icons appear as intended:

    On a page with the transparent / glassy header option selected, the burger menu icon and “X” closing icon inherit the hover color of #cccccc from somewhere. This color is the highlight color I want for the transparent / glassy header when it’s above 990px in desktop mode. In mobile mode, the transparent / glassy header is no longer transparent, I think by default it just looks like the normal header. That’s fine, I just want the hover state to be visible.

    Here is what my transparent / glassy header looks like in desktop mode. All links and icons are white with no indicator of the current page. On hover, the color changes to #cccccc. I had to tweak the CSS quite a bit in the custom CSS to make this work so that’s why I think it’s probably my fault. I just can’t figure out how to fix it. Here is the link: Original Vintage Guitars

    • This topic was modified 1 year, 10 months ago by hmsvictory.
    #1372158

    Hey hmsvictory,

    Thank you for the inquiry.

    You can use this css code to revert the background color of the hovered or active mobile menu to default.

    #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner, #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::before, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::before, #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::after, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::after {
        background: #787878;
        opacity: 1;
    }
    

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    #1372252

    Perfect, thank you Ismael.

    #1372268

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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