[Resolved] Mobile header: show cart and search icons

[Ruben]

Hello team,

I am using primary and secondary navigations for desktop and mobile header for mobile.

I moved both my search and my cart icons to the secondary menu. When switching to mobile header the search icon remains in place but not the cart. How can I keep also the cart?

Thank you.

Sorry I cannot share the url, I’m on a local server for testing.

[Tom]

Hi there,

How are you moving the icons to the secondary menu? Can you share your code?

Let us know 🙂

[Ruben]

Hi Tom,

I’m doing it through the Snippets, with the code you guys suggest somewhere in the Documentation. I’m not much of a coder, so I might have done something wrong 🙂

For Cart:

add_filter( 'generate_woocommerce_menu_item_location', 'tu_move_menu_cart_item' );
function tu_move_menu_cart_item() {
    return 'secondary';
}

For Search:

add_action( 'after_setup_theme', function() {
	remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
	remove_action( 'generate_inside_navigation', 'generate_mobile_menu_search_icon' );
	
	add_action( 'generate_inside_secondary_navigation', 'generate_navigation_search' );
	add_action( 'generate_inside_secondary_navigation', 'generate_mobile_menu_search_icon' );
	
	remove_filter( 'wp_nav_menu_items', 'generate_menu_search_icon', 10, 2 );
} );

add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
	$generate_settings = wp_parse_args(
		get_option( 'generate_settings', array() ),
		generate_get_defaults()
	);

	if ( 'enable' !== $generate_settings['nav_search'] ) {
		return $nav;
	}
	
	if ( 'secondary' === $args->theme_location ) {
		$icon = generate_get_svg_icon( 'search', true );
		return $nav . '<li class="search-item" title="' . esc_attr_x( 'Search', 'submit button', 'generatepress' ) . '"><a href="#">' . $icon . '<span class="screen-reader-text">' . _x( 'Search', 'submit button', 'generatepress' ) . '</span></a></li>';
	}

	return $nav;
}, 10, 2 );

[Tom]

Have you switched to the flexbox version of the theme?

[Ruben]

Yes, I started designing the web on v.3, so I guess it defaults to flexbox.

[Tom]

Just tested this and it seems to be working:

add_filter( 'generate_woocommerce_menu_item_location', function() {
    return 'secondary';
} );

add_action( 'wp', function() {
    remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
    add_action( 'generate_inside_secondary_navigation', 'generate_navigation_search' );

    if ( 'enable' === generate_get_option( 'nav_search' ) ) {
        remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );
        add_action( 'generate_secondary_menu_bar_items', 'generate_do_navigation_search_button' );
	}
}, 20 );

[Ruben]

Hi Tom,

It works. Thanks a lot!

[Tom]

You’re welcome 🙂

[Author]

Posts