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

[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

[Tom]

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 🙂

[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

[Tom]

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

[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

[David]

Hi there,

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

[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

[Tom]

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

[Natalie]

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

[Fabien]

Hi,

I am using the following code on Flexbox to move the search button to the secondary navigation and it works well.

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 );

How can I display the search button to my mobile header ?

Thanks !

Fabien

[Fabien]

PS : I was using this before (float version) : https://gist.github.com/generatepress/38a3d4d0e3f1be118cac76937e4c92e6

[David]

Hi there,

can you raise a new topic where you can share a link to your site so we can see the issue.

[Fabien]

Will do once I move to staging env. !

Thanks David !

[David]

No problems – we will wait for your new topic 🙂

[Author]

Posts