Move nav search icon to top bar

Hi George,

You may try this one here: https://generatepress.com/forums/topic/move-cart-and-search-icons-from-header-to-top-bar/#post-1688913

Ok thanks, that didn't work for me, the search field not being visible but I decided to go with a search bar instead. I will reopen if needed.

Thanks, Fernardo!

I see. You’re welcome George!

Hi Fernando, I came back to it and made it work. The only issue is that I can't see the close search icon, any idea why? I am attaching a URL, check on mobile view.

Can you try creating a portable shortcode hook for the Search Icon? Example:

function search_shortcode($atts, $content = null) {
      ob_start();
      do_action('hook_search');
      return ob_get_clean();
}
add_shortcode('portable_search', 'search_shortcode');

add_action( 'wp', function() {
    if ( 'enable' === generate_get_option( 'nav_search' ) ) {
        remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );
        add_action( 'hook_search', 'generate_do_navigation_search_button' );

        remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
        add_action( 'hook_search', 'generate_navigation_search' );
    }
}, 20 );

With this, you can add shortcode portable_search anywhere.

You can also create a new short code for generate_navigation_search so it’s in your preferred location.

Yeah, the previous code from Elvin from the thread you suggested produced the same result. The problem is the close button, somehow it gets hidden.

On desktop, did you set it to hide in the settings? It’s set to display: none on desktop.

Yeah, I am using the shortcode in a button which is only visible on mobile.

Can you try adding this CSS?:

span.search-item.active.close-search a svg{
    fill: #000;
    z-index: 9999;
}

Ah, perfect, thanks!

You’re welcome George!