Search Box – Color – Size – Expand

[Brett]

I have the search icon in the nav menu. Also, the current menu item background set to a light green.

When I click on the menu icon, the entire menu turns into a text box, which is great. However, the text box is light green and the focus is over at the beginning of the box on the far left.

1. How can I change the search box color and font?
2. Is there a way to make the search box smaller and expand as needed?

Thanks!

GeneratePress 1.3.44

[Tom]

Hi there,

You can change the navigation search background color and text color with this CSS:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active {
    color: #3f3f3f;
    background-color: #3f3f3f;
}

You can’t have the search box expand as needed, but you can change the width:

.navigation-search {
    max-width: 300px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Brett]

The Search Box size change worked and looks great. Unexpectedly, it looks even better on the mobile.

The color change did not work.

[Brett]

One more thing, the menu bar has lots of options. Users are complaining about the search box covering the other options, would it be possible to drop the search box into its own row when activated?

[Tom]

Can you link me to your site so I can take a look?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

I’m looking to reduce the height of the search box. Can this be done by adding CSS to the Additional CSS box in the customizer? FYI – my site is: korehr.com

[Tom]

The search bar in your header? It doesn’t seem to do anything, and is built using Elementor. You would have to use their settings to alter the appearance of it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Ok – I had to build the index so now I am getting search results. I also switched it to a standard WordPress Search Box which I still would like to change the size of. Can you help with that?

[Tom]

I’m not seeing anything in your header now: https://www.screencast.com/t/1ryhcgGcd

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[jcbeal]

I have the search icon in the nav menu. Due to accessibility problems, I need to increase the size of the Search Icon.

[Leo]

Can you open a new topic for this?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts