Transparent (overlay) header to solid when scrolling down

Hey, is there a way to have a transparent header when at the top of the page, but have it turn into a solid (black) header as soon as you start scrolling down?

Hello,

Please remove the color in the columns as described here: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/ and then set the header sticky: https://xtemos.com/docs/woodmart/header-builder/enable-sticky-header-option/

Best Regards

OK. Thanks. Now when it goes to solid color it goes to a dark gray. how can I switch it to black?

Hello,

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

body .whb-sticked .whb-general-header {
    background-color: green;
}

Set the color as per your needs.

Best Regards

Worked out! Thanks so much!

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

Best Regards

[Author]

Posts