[Resolved] Search nav color

Home Forums Support Search nav color

This topic contains 15 replies, has 2 voices, and was last updated by  Leo 3 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • #925143


    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?



    Leo Customer Support

    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?



    Leo Customer Support


    Hi thanks but that snippet does not work…


    Leo Customer Support

    Just tested and it worked perfectly for me:

    Can you make sure all caching is cleared and disabled?



    Hi Leo, I am not using any cache plugins.


    Leo Customer Support

    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


    Leo Customer Support

    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?


    Leo Customer Support

    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:



    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() {
    ‘<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” />
    esc_url( home_url( ‘/’ ) ),
    esc_attr( get_search_query() ),
    esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
    } );



    Leo Customer Support

    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" />
    		esc_url( home_url( '/' ) ),
    		esc_attr_x( 'Search', 'label', 'generatepress' )


    Awesome! that did it. Thanks so much Leo.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.