[Resolved] Main Navigation Search Bar CSS

[David]

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

[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.

[David]

I was wrong, I thought ‘.main-navigation .search-field’ would do the trick.

Any help is much appreciated.

[Tom]

Hi David,

Give this a try:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active {
    /* Your CSS */
}

[David]

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

[Tom]

What’s the CSS you’re adding?

[David]

I’m testing with:

background: #000;
color: #fff;

background-color: #000;
color: #fff;

Also tried with adding ‘!important’, but nothing happens

[Tom]

Can you link me to your site?

[David]

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

[Tom]

Yellow and grey? Do you have a screenshot of that?

Maybe it’s the browser defaults for search forms?

[David]

Hi Tom, perhaps it is indeed an issue with browser default, haven’t thought of that!

Here is a .

David

[Tom]

Ah, the answer here might help: http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background

[David]

Thx again!

[Tom]

You’re welcome 🙂

[Author]

Posts