Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 10, 2022 at 10:24 pm #1372136
    hmsvictory

    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 2 years, 1 month ago by hmsvictory.
    November 11, 2022 at 8:21 am #1372158
    Ismael

    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

    November 11, 2022 at 6:13 pm #1372252
    hmsvictory

    Perfect, thank you Ismael.

    November 11, 2022 at 9:38 pm #1372268
    Rikard

    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

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