How to change color of Search option text in header
Permalink Browser Info Environment
This should be a simple css tweak, but the solution is evading me. I'll probably be embarrassed by the solution, but I just can't find it.
With this website, marvssanitationservice.com, on the home page, the search icon is a dark gray, unlike the other navigation text which is white. I would like it to be white as well. Also, when the search icon is clicked, opening the Search box, the position text is dark gray and I'd like it to be white. I've tried to find the color source to change it but not having any luck. The other pages are fine - this text is white, as I want it. Can you help me figure out why this is staying dark gray on the home page only?
Thanks,
Steve
With this website, marvssanitationservice.com, on the home page, the search icon is a dark gray, unlike the other navigation text which is white. I would like it to be white as well. Also, when the search icon is clicked, opening the Search box, the position text is dark gray and I'd like it to be white. I've tried to find the color source to change it but not having any luck. The other pages are fine - this text is white, as I want it. Can you help me figure out why this is staying dark gray on the home page only?
Thanks,
Steve
| Type: | Ticket |
|---|---|
| Status: | Resolved |
Thanks for the tip, but why does it work the way I want it (white text) on all the other pages other than the Home page. I have matched the Attribute settings.
I've tried your suggestion, though I'm sure I've tried that before.
Why, with the same settings, are the other pages displaying the Search box text in white, and yet dark grey on the Home page only?
Why, with the same settings, are the other pages displaying the Search box text in white, and yet dark grey on the Home page only?
Some options can be overridden on the page level. You may want to check that.
If you couldn't figure that out, send me your site credentials via private msg and I will take a look.
If you couldn't figure that out, send me your site credentials via private msg and I will take a look.
Hello,
I finally found a work-around. I put this in the custom CSS:
#top-search a, #top-cart a, #side-panel-trigger a, #top-account a {
color: #fff !important;
}
::placeholder {
color: #fff !important;
}
It's working for me now, but I'm sure there must be a better way, though I couldn't find one.
If you know of one or want to look into it further, I'll leave the login to my site active for you for a week.
Thanks for your help,
Steve
I finally found a work-around. I put this in the custom CSS:
#top-search a, #top-cart a, #side-panel-trigger a, #top-account a {
color: #fff !important;
}
::placeholder {
color: #fff !important;
}
It's working for me now, but I'm sure there must be a better way, though I couldn't find one.
If you know of one or want to look into it further, I'll leave the login to my site active for you for a week.
Thanks for your help,
Steve
Good work!
Cheers,
Cheers,
Try enabling the dark header feature on:
Pixel Options > Header > Header > Dark
Bear in mind it will enable it for the whole site. If you have that dark-themed slider on your home page only, set it on the page level via the equivalent attribute.
Plus, in these scenarios, it would be nice to use the `color overlay` feature of the built-in slider so that the menu text always stands out no matter what image you use as the slider.