Different background color header menu for desktop and mobile

Hi,

I would like to have different colors for heading menu in mobile compare to dektop.
Right now in desktop i have grey and in mobile i would like to have blue, with all elements to be white, like menu icon, login icon, search icon and shipping cart icon.

How is this possible?

Hello,

Please try adding the following Custom CSS in the Custom CSS for the mobile area under Theme Settings >> Custom CSS.

.whb-general-header {
	background-color: #1c42df;
}

.woodmart-burger-icon .woodmart-burger {
color: white;
}

span.woodmart-burger-label.wd-tools-text {
color: white;
}

.woodmart-shopping-cart .woodmart-cart-icon:before {
	color: white;
}

.my-account-with-icon .wd-tools-icon:before {
	color: white;
}

Regard’s.
Xtemos Studios.

Hi,

Thanks for the code.
In mobile it works, but in desktop it change the background color of header in main menu which i dont.
I want the desktop header to remain as it is and change the mobile only.

Thanks!

Hello,

You are Most Welcome.

It seems that you are adding the CSS Code in the Global Custom CSS area that’s why it is affecting the desktop as well.

Please move the Custom CSS to the Custom CSS for the Mobile area under Theme Settings >> Custom CSS.

Then clear cache and check back.

Regards.
Xtemos Studios.

It seems to work now.
Thank you!

It seems strange that you did not have such an option in header builder or theme options all these years.

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.

[Author]

Posts