[Support request] Mobile Header – Search Icon

Home Forums Support [Support request] Mobile Header – Search Icon

Home Forums Support Mobile Header – Search Icon

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1570284
    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

    #1570499
    David
    Staff
    Customer Support

    Hi there,

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

    add_action( 'generate_inside_mobile_menu_bar', 'generate_navigation_search' );

    #1570851
    Fabien

    Thanks David but I’ve tried and it doesn’t do anything ๐Ÿ™

    #1571156
    Elvin
    Staff
    Customer Support

    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?"

    #1571179
    Fabien

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

    #1571186
    Elvin
    Staff
    Customer Support

    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?"

    #1571213
    Fabien

    Awesome, works like a charm !

    Thanks Elvin

    #1571215
    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

    #1572243
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’ll need CSS here.

    For example:

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

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

    #1573218
    Tom
    Lead Developer
    Lead Developer

    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! ๐Ÿ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.