Home › Forums › WoodMart support forum › How to configure CSS for different headers?

How to configure CSS for different headers?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 26, 2025 at 2:20 pm #649163

    z.william
    Participant

    Hi team!

    My single product page has a different header (Header tenmokuartisan Product), while other pages use the default header (Header tenmokuartisan).

    I added code through Custom CSS > Desktop to make the default header have the following settings: Transparent background, white text, and white icons in the default state; and white background, black text, and black icons after scrolling.

    What I need is for the header on the ‘single product page’ to have: White background, black text, and black icons, both in the default state and after scrolling.

    I’m not sure how to differentiate between the two types of headers in CSS, or if there is another setting method for this.

    • This topic was modified 5 days, 10 hours ago by z.william.
    March 26, 2025 at 4:08 pm #649208

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    All single product pages have a body class like .single-product, so you can use this css:

    .single-product .whb-sticked .wd-tools-element .wd-tools-icon {
    background-color: white !important;
    color: #000000 !important;
}
.single-product .whb-sticked .wd-header-nav .wd-nav[class*="wd-style-underline"] .nav-link-text {
color: #000000 !important;
}

    This ensures the styling only applies to single product pages and doesn’t interfere with your default header. Try to use this custom css and check how it works.

    Best Regards,

    March 28, 2025 at 5:54 am #649731

    z.william
    Participant

    it worked!
    Thank you!

    March 28, 2025 at 9:45 am #649771

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You’re very welcome! I’m glad I could help. If you need anything else, feel free to reach out!

    Thanks for contacting us.
    Have a great day.

    Topic Closed.
    Best Regards,

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘How to configure CSS for different headers?’ is closed to new replies.