[Resolved] header – primary navigation – search icon always on a new line

[Stephen]

http://www.stephenlavender.site

I’ve turned on navigation search in primary navigation layout options and the search icon is always on its own line in the navigation menu.
I understand as the navigation menu re sizes it can use another line but the search icon is always on a new line by itself

– Can I get the search icon on the same line as the rest of the menu?

Thanks
Stephen

[David]

Hi there,

Try adding this PHP Snippet to your site:

add_action( 'wp', function() {
    remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );
}, 500 );

add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
    if ( 'enable' !== generate_get_option( 'nav_search' ) ) {
        return $nav;
    }

    if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
        $search_item = apply_filters(
            'generate_navigation_search_menu_item_output',
            sprintf(
                '<li class="search-item menu-item-align-right"><a aria-label="%1$s" href="#">%2$s</a></li>',
                esc_attr__( 'Open Search Bar', 'generatepress' ),
                generate_get_svg_icon( 'search', true )
            )
        );

        return $nav . $search_item;
    }

    return $nav;
}, 10, 2 );

How to Add PHP: https://docs.generatepress.com/article/adding-php/

[Stephen]

great thanks, works perfectly as always.

Now though I dont have a search icon on mobile screen sizes

– can I get the search icon back on my mobile screen size header ?

Thanks
Stephen

[David]

Remove this part of the snippet:

add_action( 'wp', function() {
    remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );
}, 500 );

It should now show 2x on Desktop, if it does let us know and ill provide the CSS to remove the duplicate

[Stephen]

Hi, yes thats right there is 2 search icons now, 1 inline with the menu and one on a new line in desktop

[David]

Add this CSS:

@media(min-width: 850px) {
    .main-navigation .menu-bar-item.search-item {
        display: none;
    }
}

[Stephen]

thats great thanks

In the mobile header the search icon is grey and a bit small.

– Can I make the search icon white and make it bigger for mobile screen size ?

Thanks
Stephen

[David]

Try this:

#mobile-header .menu-bar-items a {
    color: #fff;
    font-size: 20px;
}

[Stephen]

thats perfect, thank you

[David]

You’re welcome

[Author]

Posts