Archived topic
Search nav color
15 replies · Started by Sam on June 10, 2019
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
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 :)
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
Give this a shot:
https://generatepress.com/forums/topic/search-box-clear/#post-574769
Hi thanks but that snippet does not work...
Just tested and it worked perfectly for me:
https://www.screencast.com/t/xbtvMlRq0P
Can you make sure all caching is cleared and disabled?
Hi Leo, I am not using any cache plugins.
How are you adding the code?
In order to further debug, we will need to see the issue live.
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
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 :)
What are you be looking to check, maybe I can advise from here?
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
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
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' )
);
}
Awesome! that did it. Thanks so much Leo.