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

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.

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,

– 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.

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

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.

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

thank you for your support

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