Mobile Header - Search Icon

Hi there,

try including this to add it back into the mobile menu:

add_action( 'generate_inside_mobile_menu_bar', 'generate_navigation_search' );

Thanks David but I've tried and it doesn't do anything :-(

Hi,

I believe you can modify your existing code to add in the mobile header search.

Example:

add_action( 'wp', function() {
    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' );

        remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
        add_action( 'generate_inside_secondary_navigation', 'generate_navigation_search' );
	add_action( 'generate_inside_mobile_menu_bar', 'generate_navigation_search' );
    }
}, 20 );

Thanks David but I’ve tried and it doesn’t do anything 🙁

To clarify: Are you trying to add the search bar inside the slide-out/off-canvas menu instead? Let us know. :)

Nope, I try to add the search icon on my mobile header. Please check the prod version of my site in the comments.

Can you try this instead?

add_action( 'after_setup_theme', function() { // set it up after the theme finishes setup
    if ( 'enable' === generate_get_option( 'nav_search' ) ) {
        remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' ); //remove search on default location "menubar item"
        add_action( 'generate_secondary_menu_bar_items', 'generate_do_navigation_search_button' ); // add the search toggle icon on secondary menu

        remove_action( 'generate_inside_navigation', 'generate_navigation_search' ); // remove the search form inside icon on default location
        add_action( 'generate_inside_secondary_navigation', 'generate_navigation_search' ); // add the search form on secondary menu
	
		add_action( 'generate_inside_mobile_menu_bar', 'generate_do_navigation_search_button' ); //add search icon on mobile header
		add_action( 'generate_inside_mobile_menu_bar', 'generate_navigation_search' ); //add the search form on mobile header
    }
}, 20 );

We've changed wp action to "after_setup_theme" so the action is done once the theme is loaded. We've also added the Icon so we can toggle it.

You can clean up the comments if you want. I just left it there so there's an indicator for you to clearly know what each line does. :)

Awesome, works like a charm !

Thanks Elvin

Sorry, actually it works BUT it re-adds the search icon to my primary navigation on desktop (please check URL in comments)

PS : I'd like to avoid extra CSS

Hi there,

You'll need CSS here.

For example:

.main-navigation:not(.mobile-header-navigation) .search-item {
    display: none;
}

Thanks Tom, I would have like to avoid CSS but it seems there is no other way (it was feasible with Float version).

From a technical standpoint, I'm not sure how it would have been possible, unless of course you were hooking it only into the mobile header.

That being said, that's only 3 lines of CSS, so definitely not an issue when it comes to performance or complexity - CSS is good! :)