Change Sticky Header scroll color

Hello,

I have researched and tried a few different things but nothing is working. I want to change the color of the sticky header when you scroll down, right now the default color it changes to is black. How can I change this? Thanks in advance!

Hello,

Thank you very much for choosing our theme and for contacting us.

There is no option to set the color, it can be done with custom CSS.

Please add this code to the Theme Settings > Custom CSS > Global:

body .main-header.header-has-no-bg.color-scheme-light.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:yellow;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a{
color:blue;
}
body .main-header.header-has-no-bg.act-scroll .menu > li > a:after{
color:blue;
}
body .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:yellow;
}
body .main-header.header-has-no-bg.act-scroll .right-column>div ul li a, 
body .main-header.header-has-no-bg.act-scroll .right-column>div>a {
    color: white;
}
body .main-header.header-has-no-bg.act-scroll .right-column  .amount {
    color: #f7f7f7;
}

Set the colors as per your needs.

If the code does not work, please provide your site URL.

Best Regards

[Author]

Posts