Archived topic
Main Navigation Search Bar CSS
13 replies · Started by Anonymous on April 12, 2016
Hi there,
another css question...
Anyone know how-to edit the (GP standard) search bar css in the main navigation?
For example the background-color, color and opacity.
I'm trying to adjust '.navigation .search-field', '.navigation-search' and '.navigation .search-field'.
Feel a bit stupid for not being able to find this, but perhaps someone has the answer.
Warm greetings,
David
Hold on, I might be able to sort it out myself.
'.main-navigation li.search-item' seems to be the right name for this style.
I was wrong, I thought '.main-navigation .search-field' would do the trick.
Any help is much appreciated.
Hi David,
Give this a try:
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active {
/* Your CSS */
}
Thanks a lot Tom,
I tried to see if that works, but nothing happens. I'm not using any cache plugins and everything refreshes on the fly here, but I will try and make sure it's not just from my side, by checking other browsers and mobile first. So far it doesn't seem to affect my style.
David
What's the CSS you're adding?
I'm testing with:
background: #000;
color: #fff;
background-color: #000;
color: #fff;
Also tried with adding '!important', but nothing happens
Can you link me to your site?
Ha Tom, I woke up and now it works =)
One thing though, the reason why I am still not using it at the moment; the 'yellow' and 'grey' color in the search drop-down has the same colors as you can see on your generatepress site. It's propably a default somewhere, but that's the part I really need to be able to edit to have it match the style of my own site. Would be great if thats possible to change because its a great and slick search bar that fits your theme perfectly!
I hope you understand what I mean =)
David
Yellow and grey? Do you have a screenshot of that?
Maybe it's the browser defaults for search forms?
Hi Tom, perhaps it is indeed an issue with browser default, haven't thought of that!
Here is a
.
David
Ah, the answer here might help: http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background
Thx again!
You're welcome :)
