Home › Forums › WoodMart support forum › Two Issues: Sticky Header Color States & Page Title Height Jump

Two Issues: Sticky Header Color States & Page Title Height Jump

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 16, 2026 at 9:45 pm #721763

    lavitasarim
    Participant

    Hello WoodMart Team,
    We have a new website and we decided to go with the WoodMart theme once again. Although everything is going well, we have encountered a few issues and urgently need your assistance with them. Thank you so much in advance.

    🔴 ISSUE 1 – Sticky Header: Separate Color Settings per State When the header is sticky, we want certain settings to update; for example, we want to customize elements such as the text color, the account icon color, and the color of the shopping cart icon with the subtotal. Currently, all settings remain the same whether the header is sticky or not, which causes inconsistencies in the site’s current structure. (ss1-2-3-4)
    What we wanted to do:
    We wanted the entire header to be white when it wasn’t sticky on the homepage.
    When the header was sticky, we wanted a different color for the color scheme.

    🔴 ISSUE 2 – Inner Page Title Area: Height Jump on Mouse Move On all inner pages (e.g., About Us, Collection), the page title/banner section displays a larger height when the page first loads. However, the moment the user moves their mouse, the section instantly collapses to a smaller height. This sudden change is visually noticeable and creates a poor user experience.
    Behavior summary:
    On page load → The page title area appears with an extra height (see Screenshot 5).
    On first mouse movement → The height collapses itself instantly (see Screenshot 6).
    Could you please guide us on how these issues can be properly resolved?
    Best regards,

    Attachments:
    You must be logged in to view attached files.
    June 17, 2026 at 11:06 am #721805

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

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

    /* Sticky header background */
.whb-sticked .whb-row {
    background: #5c1f2e !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: #ffffff !important;
}

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

    02. 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,

    June 17, 2026 at 1:19 pm #721822

    lavitasarim
    Participant

    – The code you provided didn’t quite work for us. Due to an issue with the header, we used separate header blocks on the homepage and inner pages.
    Our goal is:
    1- On the homepage, the header background is transparent, and the menu and icons are white (when not sticky)
    2- When the homepage is sticky, the background is white, and the text and icons are the logo color (burgundy) (when sticky)

    3- On inner pages, the header background is burgundy, and the menu and icons are white (when not sticky)
    4- On inner pages, when the header is sticky, the background is white, and the text and icons are the logo color (burgundy) (when sticky)

    – Our other issue is that when moving the mouse on inner pages, the height of the page title area becomes distorted and visibly decreases.

    June 17, 2026 at 2:48 pm #721835

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

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

    .home .whb-sticked .whb-row {
    background-color: #ffffff !important;
}

.home .whb-sticked .wd-nav-header > li > a,
.home .whb-sticked .wd-tools-text,
.home .whb-sticked .wd-header-nav span,
.home .whb-sticked .wd-tools-element > a {
    color: #5c1f2e !important;
    --wd-header-el-color: #5c1f2e !important;
    --wd-navigation-color: 92, 31, 46 !important; /* RGB equivalent of #5c1f2e */
}

/* Fixes subtotal and icon color overrides */
.home .whb-sticked .wd-tools-element {
    --wd-header-el-color: #5c1f2e !important;
}

.home .whb-sticked .whb-row {
    background-color: #ffffff !important;
}

/* 1. Default Inner Page State (Not Sticky) */
body:not(.home) .whb-row {
    background-color: #5c1f2e !important;
}

body:not(.home) .wd-nav-header > li > a,
body:not(.home) .wd-tools-text,
body:not(.home) .wd-header-nav span,
body:not(.home) .wd-tools-element > a {
    color: #ffffff !important;
    --wd-header-el-color: #ffffff !important;
    --wd-navigation-color: 255, 255, 255 !important;
}

body:not(.home) .wd-tools-element {
    --wd-header-el-color: #ffffff !important;
}

/* 2. Sticky Inner Page State (When scrolled) */
body:not(.home) .whb-sticked .whb-row {
    background-color: #ffffff !important;
}

body:not(.home) .whb-sticked .wd-nav-header > li > a,
body:not(.home) .whb-sticked .wd-tools-text,
body:not(.home) .whb-sticked .wd-header-nav span,
body:not(.home) .whb-sticked .wd-tools-element > a {
    color: #5c1f2e !important;
    --wd-header-el-color: #5c1f2e !important;
    --wd-navigation-color: 92, 31, 46 !important;
}

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

    .page-title-default {
    min-height: 320px !important;
    padding-bottom: 40px !important;
	    padding-top: 60px !important;
}

    Best Regards

    June 17, 2026 at 5:39 pm #721865

    lavitasarim
    Participant

    As it stands, my internal pages are complete, but on the homepage, the header is transparent (which is correct), while the menu and icons should be white

    1- On the homepage, the header background is transparent, and the menu and icons are white (when not sticky)
    2- When the homepage is sticky, the background is white, and the text and icons are the logo color (burgundy) (when sticky)

    Attachments:
    You must be logged in to view attached files.
    June 18, 2026 at 9:50 am #721932

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    For the home page menu color on the not sticky header, Navigate to WoodMart > Header builder > Edit “Header Event Agency Overlap- home” header > Edit menu element and in the style tab change the menu color.
    https://postimg.cc/gxDSnzwZ

    Regarding the icons color, edit the main header row and in the style tab, set the text color scheme to “Light”.
    https://postimg.cc/Xpxd5p8p

    Best Regards

    June 18, 2026 at 10:42 pm #721995

    lavitasarim
    Participant

    thank you for your support

    June 19, 2026 at 9:41 am #722008

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    You’re Most Welcome!

    Feel free to write back anytime. If you need further assistance, we are always here to help you.

    If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme:
    https://www.trustpilot.com/review/xtemos.com

    Thanks for contacting us.
    Have a great day.

    Topic Closed.
    Best Regards.

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

The topic ‘Two Issues: Sticky Header Color States & Page Title Height Jump’ is closed to new replies.