[Resolved] Move nav search icon to top bar

[George]

I have a GP element set as a top bar through the before_header hook and I want to move the nav search icon in there. Is there a way to do that, maybe through a shortcode?

[Fernando]

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

[George]

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!

[Fernando]

I see. You’re welcome George!

[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.

[Fernando]

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.

[George]

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.

[Fernando]

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

[George]

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

[Fernando]

Can you try adding this CSS?:

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

[George]

Ah, perfect, thanks!

[Fernando]

You’re welcome George!

[Author]

Posts