Archived topic
Move search icon and search bar to secondary menu
10 replies · Started by Len on April 4, 2023
I have found a number of related posts, but none quite address the issue I have. I want the search icon at the right of the secondary navigation, not the primary one.
I have a secondary menu with the site logo to the left - standard GP settings.
Then to the right:
A menu assigned to the secondary menu, just with My Account as the link.
PHP code added to move the Woocommerce basket icon to the secondary menu, to the right of the My Account
The primary menu is beneath the secondary menu, but has the search icon to the very right of the right most menu item.
I want the search icon to be to the right of the Woocommerce basket in the secondary menu.
I have the new modal search function working.
I have seen these 2 posts, both include this PHP that is supposed to move the search icon, but it doesn't move the search icon. Its in a div with a class "menu-bar-items", still in the main-navigation structure.
https://generatepress.com/forums/topic/how-to-create-header-with-following-order/
https://generatepress.com/forums/topic/move-search-icon-to-header/
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 do I move this icon please?
LenW
Hi LenW,
Can you provide admin login credentials?
We'll check why the code didn't work.
Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Access in private info section.
I use Custom CSS & JS for adding CSS, and the Snippets plugin for adding php.
Try this:
add_action( 'wp', function() {
if ( 'enable' === generate_get_option( 'nav_search_modal' ) ) {
remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger');
add_action( 'generate_inside_secondary_navigation', 'generate_do_search_modal_trigger' );
}
}, 20 );Fernando, the search icon has still not moved, still in the primary menu bar position.
LenW
Try this:
add_action( 'wp', function() {
if ( generate_get_option( 'nav_search_modal' ) ) {
remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger');
add_action( 'generate_inside_secondary_navigation', 'generate_do_search_modal_trigger' );
}
}, 20 );Fernando
That works, its now in the secondary menu, thanks.
However, I need it positioned as the last item, so after the secondary-menu-bar-items div, not as the first item, so as it was in the primary navigation. I know that's not really a CSS solution, its a structural position.
So need, inside the "inside-navigation" div, the required structure is:
Secondary nav items, secondary menu bar items (this is the woocommerce basket moved with the PHP snippet from the forum), then the search icon.
How can we amend the above code to achieve this?
Thanks
Managed to fix this:
Changed:
generate_inside_secondary_navigation
to
generate_after_secondary_navigation
Thanks for your help, please consider sorted.
I see. Glad it's working now. You're welcome, Len!
How to I amend this so that it only works for desktop, and not for tablet and mobile?
Thanks
LenW
You can add ! wp_is_mobile() to the if statement, so the code only works on non-mobile devices.
add_action( 'wp', function() {
if ( generate_get_option( 'nav_search_modal' && ! wp_is_mobile() ) ) {
remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger');
add_action( 'generate_after_secondary_navigation', 'generate_do_search_modal_trigger' );
}
}, 20 );