[Resolved] Search nav color

[Sam]

Hi I can see some threads about changing the background color and color of the nav bar search field and it is all done seemingly with css. I was wondering is there no option in the customizer for this?

thanks
Sam

[Leo]

Hi there,

Currently not. I don’t believe this comes up very often but will definitely mention to our group to see if it’s option-worthy.

Let me know if you need help with the CSS in the meantime 🙂

[Sam]

Hi OK noted I’ll adjust with CSS for now.

Also, while testing, I noticed something odd with the search form in the header. If you do a search, when the results page loads, it does not clear the search field. So if you were to then do a second search and just start typing it would be a mess as it would include the string from your previous search. You would have to manually delete your first search to do a second, which is a bad UX. Is this supposed to be the case or has it been overlooked? is there a way of making this form clear when the page is reloaded / search performed?

thanks
Sam

[Leo]

Give this a shot:
https://generatepress.com/forums/topic/search-box-clear/#post-574769

[Sam]

Hi thanks but that snippet does not work…

[Leo]

Just tested and it worked perfectly for me:
https://www.screencast.com/t/xbtvMlRq0P

Can you make sure all caching is cleared and disabled?

[Sam]

Hi Leo, I am not using any cache plugins.

[Leo]

How are you adding the code?

In order to further debug, we will need to see the issue live.

[Sam]

Hi sorry I am using a Mamp local server for development I know it is not ideal for debugging. I am adding the snippet with the Snippets plugin as you guys recommend.

See hear a screen cast: https://www.dropbox.com/s/en4676ypl08phwx/clear-search.mov?dl=0

[Leo]

Sorry but it’s not really possible to debug with screen capture – my screen capture is showing that it’s working but that doesn’t help you either.

Thanks for your understanding 🙂

[Sam]

What are you be looking to check, maybe I can advise from here?

[Leo]

I’m not sure yet unfortunately.

Did a little more research and the same code worked for someone else as well so there must be something specific to your install:
https://generatepress.com/forums/topic/navigation-logo-problem/page/2/#post-882684

[Sam]

Hi Leo, ok I worked out why it is not working, but it throws up another issue to solve : (

I am using also the below snippet provided on this forum, that makes the search form only search products (which I need). With this disabled, the clear form snippet works. So the question is, how do we make both snippets work with each other? Could they be combined?

add_filter( ‘generate_navigation_search_output’, function() {
printf(
‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
<input type=”search” class=”search-field” value=”%2$s” name=”s” title=”%3$s” />
<input type=”hidden” name=”post_type” value=”product” />
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr( get_search_query() ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
);
} );

thanks
Sam

[Leo]

Yup that explains it.

Try this:

add_filter( 'generate_navigation_search_output', 'tu_remove_search_query' );
function tu_remove_search_query() {
	printf( // WPCS: XSS ok, sanitization ok.
		'<form method="get" class="search-form navigation-search" action="%1$s">
			<input type="search" class="search-field" value="" name="s" title="%2$s" />
                        <input type="hidden" name="post_type" value="product" />
		</form>',
		esc_url( home_url( '/' ) ),
		esc_attr_x( 'Search', 'label', 'generatepress' )
	);
}

[Sam]

Awesome! that did it. Thanks so much Leo.

[Author]

Posts