Assistance Required for Customizing Header Visibility on Home Page

Hello WoodMart Support Team,

I hope you’re doing well. I have a website, https://nohjo.com/, and I’m looking to customize the header on the home page. Specifically, I want to hide the header completely on the home page and only show it when sticky (i.e., when someone scrolls down).

Could you please guide me on how to achieve this? If possible, could you also provide the custom CSS code required for this customization?

Hello,

Can you please share the WP admin login details of your site so I will check and give you the possible solution after checking the header settings on your site.

Best Regards.

Shared with you the login credentials.

Hello,

Without making adjustments, achieving the desired effect will not be possible. To achieve the desired effect, you will need to follow these steps:

1. Duplicate the Existing Header:
– Go to [screenshot](https://monosnap.com/file/BdCD4xX3z8f1f6DYWXgZwcu4tZThY0) to see how to duplicate the existing header.

2. Make the Duplicated Header Overlap:
– Set the duplicated header to overlap with the content using the options shown in [screenshot](https://monosnap.com/file/Pqq1qMGxMvjrdrS4OzirBw80Pa1vuI).

3. Change the Sticky Effect:
– Adjust the sticky effect to “slide after scrolled down” as shown in [screenshot](https://monosnap.com/file/tDo46Q1FsXDlSxG7mvJDnY21ff4ijQ).

4. Assign the Duplicated Header to the Homepage:
– Set the duplicated header as the custom header for your homepage by following the steps in [screenshot](https://monosnap.com/file/0aCzS1nhLALy1qb8oDmNhvfl7HWKs8).

5. Add Custom CSS Code:
– Insert the following custom CSS code into the global CSS area in Theme Settings.

.whb-header:not(.whb-sticked) {
	opacity: 0;
}

Best Regards.

It did worked for the home page. But now on any other pages let’s say on about us page the header is not visible when it is not sticky. So maybe you need to get me the correct class so it gets affected on the home page only.

Hello,

Sorry, the wrong custom CSS was written, please use the below custom CSS code:

.home .whb-header:not(.whb-sticked) {
	opacity: 0;
}

Best Regards.

Alright! Thanks for the assistance.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. 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