Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 5, 2019 at 5:03 am #1162786
    Mary

    I would like my header to be a transparent black on scroll so I am using the following css, however it is just making the header gray? Is there an element behind the header that is white which is showing through?

    /*header change on scroll*/
    #top #header.header-scrolled #header_main {
    background: rgb(0,0,0,0.5);
    }

    Thanks for your help.

    December 5, 2019 at 12:51 pm #1162954
    Yigit

    Hey Mary,

    Please add following code to Quick CSS in Enfold theme options > General Styling

    #top #header.header-scrolled .header_bg {
    background: transparent;
}

    Best regards,
    Yigit

    December 5, 2019 at 8:50 pm #1163208
    Mary

    Thank you so much, that worked! Is there a way for me to change the menu text color just on scroll?

    December 6, 2019 at 5:17 am #1163291
    Rikard

    Hi,

    Yes, you can set that under Enfold->Header->Transparency options.

    Best regards,
    Rikard

    December 9, 2019 at 9:25 pm #1164194
    Mary

    Hi Rikard, I changed the menu color in the Transparency options, but this made no change to the menu font color while scrolling. I would like to have the menu font color change to white when I scroll down on the page.

    December 10, 2019 at 2:20 am #1164267
    Jordan Shannon

    Hi,

    Add this to quick css:

    .header-scrolled.header-scrolled-full .menu-item.menu-item-top-level a .avia-menu-text{
color:#fff!important;
}

.header-scrolled.header-scrolled-full .menu-item.menu-item-top-level .sub-menu a .avia-menu-text{
color:#000!important;
}

    Best regards,
    Jordan Shannon

    December 10, 2019 at 4:26 am #1164289
    Mary

    Thank you, this almost does it! There is a point when you first start scrolling that the font turns to dark gray and when you get further down the page it then turns to white. I am not sure where in my settings it is changing it to that dark grey, but I would like it to go straight to the white.
    Also, is there a way to keep the button orange while the font turns white?

    December 10, 2019 at 1:25 pm #1164382
    Yigit

    Hi,

    Please try changing Jordan’s code to following one

    .header-scrolled .menu-item.menu-item-top-level a .avia-menu-text{
color:#fff!important;
}

.header-scrolled .menu-item.menu-item-top-level .sub-menu a .avia-menu-text{
color:#000!important;
}

#top #header .av-main-nav > li.av-menu-button-bordered > a .avia-menu-text {
    color: #f6941d!important;
}

    Best regards,
    Yigit

    December 11, 2019 at 5:17 am #1164702
    Mary

    Thank you! Works perfectly!

    December 11, 2019 at 5:58 am #1164707
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘I would like my header to be a transparent black on scroll’ is closed to new replies.