[Resolved] GP 3.0 with flexbox move search to secondary nav

Home Forums Support GP 3.0 with flexbox move search to secondary nav

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1446966
    Natalie

    With GP 3.0 Alpha.5 with flexbox enabled, the search on my secondary nav has issues. The search box (where you enter the text) on the secondary nav displays behind the menu. Also the search icon is no longer hidden from the main nav.

    I am using the code from here:
    https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation

    I just need to know whether it will be possible with flexbox to have the search moved and working correctly on the secondary nav. I realise you’ll be quite busy at the moment, so I don’t need the code right now, but I’d just like to know if it will be possible so I can make the decision whether to continue doing the conversion to flexbox on my site or stick with floats.
    Thanks

    #1447467
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The way our menu bar items (like the search toggle) changed in 3.0 flexbox.

    This would be the new PHP:

    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 will likely need some CSS to style it to suit the secondary nav as well, but I don’t believe that’s new in 3.0 🙂

    #1448014
    Natalie

    Thanks for the code Tom.

    It works, BUT

    The search text input box is still getting hidden behind the menu
    The search icon is ending up to the right of the woocommerce cart icon (it was on the left before)
    With the original code I was able to customise the search icon and put the word ‘search’ next to it – there isn’t an option for that in the new code.

    I think it is probably best if I stick with floats as at least that is all working correctly

    #1448030
    Tom
    Lead Developer
    Lead Developer

    Hmm, I would need to see your website with the issues in order to know what’s going on there. I tried it on my localhost with no issues.

    There’s never been an option to add text to the search icon (or customize it, really), but it’s certainly possible with CSS (regardless of floats/flexbox).

    #1448036
    Natalie

    Thanks Tom

    In the original code to do this:

    https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation

    there is this:

    	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>';
    }

    I just customised that to add in the word ‘search’ and also another icon I wanted.

    You can see this on my dev site – I’ve added the login details in the private info. It is not updated to GP 3.0 yet

    But that is not updated to GP 3.0 yet

    #1448658
    David
    Staff
    Customer Support

    Hi there,

    can you switch to 3.0 on the dev site so we can see the issue ?

    #1453783
    Natalie

    Hi David.

    Yes I could update to GP 3.0 but it is only with the flex layout that I have issues. With floats it does work the same as before.

    Because of all the issue with menus and flexbox (I have max mega menu issues as well as mobile size) I have decided that it is better if I don’t try to convert to flexbox.

    Thanks

    #1454159
    Tom
    Lead Developer
    Lead Developer

    Sounds good – let us know if you ever want to switch to flexbox and we’ll help make things work 🙂

    #1455018
    Natalie

    Thanks Tom. Your support is brilliant and I KNOW you’ll make things work if I want to swap to flex 🙂

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