-
AuthorPosts
-
November 10, 2022 at 10:24 pm #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 2 years ago by hmsvictory.
November 11, 2022 at 8:21 am #1372158Hey 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,
IsmaelNovember 11, 2022 at 6:13 pm #1372252Perfect, thank you Ismael.
November 11, 2022 at 9:38 pm #1372268 -
AuthorPosts
- You must be logged in to reply to this topic.