Sticky Header Color Change on Scroll

The header is currently transparent because I want the background video to be clearly visible. The header text and icons are white by default. When I scroll down the page, I want the header background to change to white, while the text and icons turn black, and the logo switches to a black version. How can I do this?

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, I am unable to visit your site at the moment due to a maintenance mode. Please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

see the url

Hello,

Try to add the following custom css code in Theme Settings > Custom CSS:

/* Sticky header background */
.whb-sticked .whb-row {
    background: #fff !important;
}

/* Text & menu color on scroll */
.whb-sticked .wd-nav-header > li > a,
.whb-sticked .wd-tools-text,
.whb-sticked .wd-header-el,
.whb-sticked .wd-header-nav span {
    color: #000 !important;
}

/* Icons on scroll */

.whb-color-light .wd-tools-element {
    --wd-header-el-color: #000000 !important;
}

Regarding the black logo in sticky header, You need to go to WoodMart >> Header Builder >> Edit Header >> Configure logo Settings and upload the black color of logo: https://postimg.cc/bDRj5B5J

Best Regards,

[Author]

Posts