[Support request] Mobile Header – Search Icon

[Fabien]

Hi,

I am currently moving from Floats to Flexbox.

In order to move the search icon to the secondary navigation, I’ve used the following function :

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' );
    }
}, 20 );

It works well. However, when using Floats, the search icon was also visible in my mobile header. It was using the following function : https://gist.github.com/generatepress/38a3d4d0e3f1be118cac76937e4c92e6

How can I bring back the search icon on my mobile navigation ?

Thanks

[David]

Hi there,

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

add_action( 'generate_inside_mobile_menu_bar', 'generate_navigation_search' );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fabien]

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

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[Fabien]

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

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[Fabien]

Awesome, works like a charm !

Thanks Elvin

[Fabien]

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

[Tom]

Hi there,

You’ll need CSS here.

For example:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fabien]

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

[Tom]

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! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts