Sticky header: change text and icon color before scroll

Hello support team,

I would like to have different header text and website logo colors when the user is at the top of the page and when he scrolls down. Currently texts and logo are black and I would like them to be white when at the top of the page and then black when scrolling down.
Here below is a video of another website sticky header that works like this.

Could you please help me on this?
I included below admin access if helpful.

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Sorry, this is not possible to set the 2 different logos for the header and sticky header. It requires customization in the theme files.

Best Regards.

Hello Aizaz,

All right for the logo. For the text, is it possible to do something?

Thanks

Hello,

We can change the text of the sticky header using Custom CSS.

Please set the color of the header text to white then i will provide you with the CSS for sticky header.

Best Regards

Hello Aizaz,

Can you please provide the css here so that I’ll include it at the same moment that I’ll change the header text color?

Also, I realize that I need to change the header text color to white only on the welcome page, where the header overlays a picture. For the rest of the website I would need to keep the header text color to black. Is it possible to do that?

Thank you

Hello,

Please provide the URL of the welcome page to check it myself and help you out accordingly.

Best Regards

Hello Aizaz,

Please find below the URL of the welcome page. To sum up, I would like to change the header text color to white, only on this page, only when the header is not sticky but at the beginning of the page.

Thank you

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.home .whb-general-header .wd-nav.wd-nav-main > li > a, .home .whb-general-header .wd-tools-icon:before {
    color: white;
}

.home .whb-sticked .whb-general-header .wd-nav.wd-nav-main > li > a, .home .whb-sticked .whb-general-header .wd-tools-icon:before {
color: black;
}

Best Regards

It works great, thanks a lot!

Hello,

You are Most Welcome.

You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts