Site logo

Archived topic

Main Navigation Search Bar CSS

13 replies · Started by Anonymous on April 12, 2016

Viewing posts 1–14 of 14

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

David

Thx again!

You're welcome :)

This archived topic is closed to new replies.