How to change the sticky header backgound color
-
how to change the sticky header background color for different headers
Hi HARSLE,
Thanks for reaching to us.
It seems you changed background color of sticky header, please confirm me back https://ibb.co/sb7kpJ4
Regards,
yes, but it is for all sticky header, I need to change the color for specific sticky header
Can I change the sticky head color and the buttons color.
For example, the default header setting is white text and transparent background, white buttons, I want to change it into black text and button, white background on sticky header.
Hi HARSLE,
1. Take a look header’s ID in the address bar https://ibb.co/6mZ47qQ
Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
.whb-header_xxx.whb-sticked .whb-general-header {
background-color: #000;
}
XXX: replace with ID.
2. For the default header, use below code:
.whb-default_header.whb-sticked .whb-general-header {
background-color: #000;
}
Regards,
did you change the button color and text color
can I use different logo for default header and sticky header?
Hi HARSLE,
Please switch to Sticky header tab and you can change the logo https://ibb.co/7N5j1hR
Regards,
how can I change the popup button color from white into black for sticky header?
how to change the popup button color and text color from white into black on sticky header
Hi HARSLE,
The background color of sticky header is now black. If you change to it into black, how can it readable?
Regards,
you did not get my point, I want to do like this:
default header
White: text, logo, popup button
Black: Background
Sticky Header
White: Background
Black: text, logo, popup button
Hi HARSLE,
Thanks for your patience.
1. Logo
Please switch to Sticky header tab and you can change the logo https://ibb.co/7N5j1hR
2. Colors
Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
.whb-sticked .whb-general-header.whb-color-light:not(.whb-with-bg) {
background-color: #fff;
}
.whb-sticked .wd-nav[class*="wd-style-"]>li>a,
.whb-sticked .wd-nav[class*="wd-style-"]>li>a:hover,
.wd-header-html .btn-style-bordered.btn-color-white{
color: #000;
}
.wd-header-html .btn-style-bordered.btn-color-white{
border-color: #000;
}
Regards,
.
