Transparent header

Good morning,

In my homepage I would like to create a transparent header that on scroll (sticky heder) become white. First the logo have to be white and then, on the white background, black.

Here an example: https://www.magnoliadesign.it/

How can I do that with your theme?

Thank you,
Sara

Hello,

Please provide your site admin access to the private area.

Best Regards

Hi,

ok, I’m sending you in private the admin access.

Sara

Hello,

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

/*sticky background*/
body .whb-sticked .whb-general-header {
    background-color: white;
}
/*sticky main menu color*/
body .whb-sticked .woodmart-navigation .item-level-0.current-menu-item>a{
color:yellow;
}
body  .whb-sticked  .woodmart-navigation .item-level-0>a{
color:yellow;
}
body  .whb-sticked  .woodmart-navigation .item-level-0>a:hover{
color:orange;
}
body  .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
color:orange;
} 

Replace the colors as per your need

Best Regards

It works very well, thank you 🙂

Sara

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts