HEADER PROBLEM EMERGENCY

Hello, we have color problem on header,

When we scroll header icon and menu need the be black… Please not say us change the original color or different sometihng question and explain what we want. Not say to us change design or lIKE THIS SOMETHING…

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to make your sticky header navigation and header elements dark.

.whb-header.whb-sticked :is(.color-scheme-light,.whb-color-light) .wd-nav[class*="wd-style-"] {
    --nav-color: #333;
    --nav-color-hover: rgba(51,51,51,0.7);
    --nav-color-active: rgba(51,51,51,0.7);
    --nav-chevron-color: rgba(82, 82, 82, .45);
}

.whb-header.whb-sticked .whb-color-light .wd-tools-element {
    --wd-header-el-color: #333;
    --wd-header-el-color-hover: rgba(51,51,51,.6);
}

Kind Reagards

WE add and homepage problem ok but product page we have an problem..

We create the new header and make it elements on black and choose it on to the shop page, but how can we use it to product page cus product page have problem …. like the pictures

Attachments:

You must be logged in to view attached files.

Our theme has option called “Custom single product header” located in Theme Settings -> Single product section (screenshot https://prnt.sc/PUevtBkf3S04). Using this option, you can set the same header for single products that you have set for the shop page.

As an alternative, you can invert your header setting and set your “black” shop page header as a general site header, and set your “black & white overlap” homepage header only to your homepage.

Kind Regards

which menu we can do this ? not looking on the this image…

Sorry, but your question is not clear enough. Option that can change header on all single product pages is located in Theme Settings -> Single product section -> Custom single product header. If you mean any other menu or option, please specify which one in more detail.

Kind Regards

still homepage when we scrolling background ise black not the website background color

By default, all color-scheme light header rows has black background, but you made custom code that changes it to your website background color (screenshot https://prnt.sc/j7Gq-WNb6sh0). The main issue is that your custom code is not working on all site pages due to insufficient specificity of CSS selectors. To fix this issue, try to replace your previous custom code with the following one:

.whb-row.whb-color-light:not(.whb-with-bg) {
	background-color: #fcf7ef;
}

Kind Regards

On mobile bg is the dark when we scroll..

look at the mobile phone dont use the browser desktop inspect element

Your header background is dark because your custom code that makes it in a beige color is not properly working on all possible instances (screenshot https://prnt.sc/jFMUl2-FX7mD). The reason is similar to your previous problem and the solution is the same, as was described in our previous reply.

1. First, you need to navigate to the Theme settings -> Custom CSS and find the following custom code (https://prnt.sc/mikJSCU3ZveS):

.whb-color-light:not(.whb-with-bg) {
      background-color: #fcf7ef;
}

2. Second, replace it with the following custom code:

.whb-row.whb-color-light:not(.whb-with-bg) {
	background-color: #fcf7ef;
}

If you do all right, your mobile scroll header will look like this (screenshot https://prnt.sc/3Zj71kZzcEu8). After making all the changes described before, before viewing the site from a real mobile device, make sure that you clear the cache of the site and the mobile browser, otherwise you will not see new changes for some time.

Kind Regards

[Author]

Posts