Header background color change issue.
-
If I change the background color of my “Desktop Main header”, the mobile version is also changed. But I want to use different background color in desktop and mobile version.
Hello,
In the WoodMart Header Builder, changing the background color of the Main Header row affects both the desktop and mobile versions, as the same header row settings are applied to all devices by default.
If you would like to use different background colors for desktop and mobile, please share your page URL. I will check your site and provide you with custom CSS to apply a different background color for the mobile header.
Best Regards
Hello,
To use a different background color on mobile while keeping the current desktop header color, please add the following CSS in Theme Settings > Custom CSS > Custom CSS for Mobile.
.whb-general-header {
background-color: #f85c2c !important;
}
Replace #f85c2c with the color you would like to use for the mobile header.
Best Regards
I have created a new custom header (Dark Header layout).
1. My new header is not showing in different browsers. Specially on the homepage, the previous header design is showing. However, the new header is showing on other pages. Again, in browsers like Google Chrome, Edge, Opera, the new header is showing, but the background color of the header is not showing. I have provided a video, if you watch it, you will understand more clearly.
2. My website logo (rangan-english-logo.svg) is not showing in the mobile header option, instead it is showing as plain text.
Attachments:
You must be
logged in to view attached files.
To Reply #722760
When I applied your given Custom CSS codes for Mobile. But the problem is, the Text color scheme doesn’t match with my mobile nav background color. If I change it to dark, it’s applying on desktop version too.
Hello,
01. It seems to be a cache issue on your site, I have purged the cache from the LiteSpeed plugin and the header is showing fine.
See Screenshots for clarification:
https://postimg.cc/mcQcSr1k
https://postimg.cc/5jPXgTyG
Please try clearing your browser cache/site cache or checking the issue.
02. Please apply the code in the mobile custom css area and add your own background color and let me know i will further check and give you a possible solution about color scheme in mobile header.
Best Regards
When I applied your given Custom CSS codes for Mobile. But the problem is, the Text color scheme doesn’t match with my mobile nav background color. If I change it to dark, it’s applying on desktop version too.
Hello,
Try using the below Custom CSS code and paste it into Dashboard >> Theme Settings >> Custom CSS >>Custom CSS for mobile:
.whb-general-header .wd-tools-element,
.whb-general-header .wd-tools-element > a,
.whb-general-header .wd-header-mobile-nav,
.whb-general-header .wd-header-my-account,
.whb-general-header .wd-header-cart,
.whb-general-header .wd-header-wishlist,
.whb-general-header .wd-header-search {
--wd-header-el-color: #333333;
--wd-header-el-color-hover: rgba(51,51,51,.7);
}
Best Regards
.
