-
AuthorPosts
-
January 20, 2023 at 8:46 pm #1394602
Hello!
We are using the transparent glassy header.
In advanced options I set the menu background-on-hover to be a color.
This background-on-hover color only displays after scrolling when the header becomes opaque.
Is there a way for this menu background-on-hover to display when using the transparent glassy header?
Additionally, can this background-on-hover have an opacity setting?thank you so much!
-
This topic was modified 2 years, 9 months ago by
doug123.
January 21, 2023 at 10:31 am #1394622Hey doug123,
Could you post a link to where we can see the element in question please?
Best regards,
RikardJanuary 21, 2023 at 7:28 pm #1394655Sure thing – thank you!
January 22, 2023 at 11:45 am #1394692Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
.av_header_transparency nav.main_menu li:hover { background-color: #8ad3f2; }Best regards,
RikardJanuary 23, 2023 at 1:48 am #1394726Thanks Rikard!
Yes that works.
but the text of the menu link disappears. I tried adding color but that didn’t work-.av_header_transparency nav.main_menu li:hover {
color: #00000 !important;
background-color: #8ad3f2;
}Also, is there a way to change the background-on-hover opacity?
January 26, 2023 at 12:31 pm #1395365Hi,
Please add the following code to Quick CSS as well
#top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .avia-menu-text { color: white; }You can use following code and adjust the opacity level of the background
.av_header_transparency nav.main_menu li:hover { color: #00000 !important; background-color: rgba(138, 211, 242, 0.6); }138, 211, 242 is the RGB value of the color and 0.6 is opacity level :)
Best regards,
YigitJanuary 28, 2023 at 3:02 am #1395691Thank you SO much! Perfect!
All the best,
DougJanuary 28, 2023 at 9:53 am #1395707 -
This topic was modified 2 years, 9 months ago by
-
AuthorPosts
- The topic ‘menu background-on-hover in transparent glassy header’ is closed to new replies.
