Home Forums WoodMart support forum Assistance Required for Customizing Header Visibility on Home Page

Assistance Required for Customizing Header Visibility on Home Page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #594025

    DJLS1997
    Participant

    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?

    #594096

    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.

    #594220

    DJLS1997
    Participant

    Shared with you the login credentials.

    #594585

    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.

    #594614

    DJLS1997
    Participant

    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.

    #594718

    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.

    #594733

    DJLS1997
    Participant

    Alright! Thanks for the assistance.

    #594746

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Assistance Required for Customizing Header Visibility on Home Page’ is closed to new replies.