[Resolved] Search Bar- Font, color – change

[Matthias]

After changing all colors i seem to use to my liking i checked the search bar (i have it activated to show in nav bar)

It seems to be a color i have choosen for links and similar.

My questions are:
1. how can i change the font + font size or search you type in. its really small
2. how can i change the font color of the search you type in? It seems to be one of the color settings i see mto have missed as it is some orange i used. The same applies for the X to cancel the search.

Additional question:
Are there different options to show the search bar after clicking the magnifying glass?
Currently its left aligned overlay of the menu. Are there any settings for that? (alignment position etc.)
I would like something like a fullscreen popup – with the search in a good font size (+color) right in the middle. With the whole background overlayed with black opacity.

[David]

Hi there,

can you share a link to the site so i can see whats effecting the placeholder and ill provide all the CSS in one go.

Additional Questions – unfortunately not…. its doable but would probably be simpler to develop something from scratch or use a popup/modal plugin.

[Matthias]

i sent a message with the data through the contact form as suggested.
It also included data for my other question here.

Hope that worked.

[Tom]

Hi there,

Try this CSS for the font size:

.navigation-search input[type="search"] {
    font-size: 20px;
}

As for the colors, do the options in Customize > Colors > Primary Navigation not work?

Let me know 🙂

[Matthias]

the color worked. I did in fact oversee that color for the Navigation Search. The settings there were empty – so the fallback seem to be the color set as current Text or similar.

the css worked also.

thx.

Just in case – as i wanted the search to be the same as the menu – andmy settings in Typography->primary Navigation was font-size 15px and font-weight 600 i did a quick search and a little trial-and-error (as i don’t know one thing about css).
so if your looking for the same look – add font-weight and use the same settings as via the typography plugin.

/*Menu - Navigation Search Font Size */
.navigation-search input[type="search"] {
    font-size: 15px; font-weight: 600
}

[Tom]

Glad it worked – thanks for sharing your CSS 🙂

[Huseyin]

How could I get the text in the middle, where users types in the middle of the search bar?
Thankssss

[Tom]

Hi there,

Any chance you can open a new topic?

Thanks!

[Author]

Posts