Add search bar to menu

Hi,

Did you try to enable ‘Seamless integration’ option from the plugin settings page?

Regards

Hello,

I’ve turned on the Seamless Integration. What is the next step to adding the search bar into my menu? I can’t seem to find it inside the menu editor.

Thanks

Did you theme supports widget areas inside header menu?
If yes – than you can just add AWS widget inside it from the WP widgets page.

Regards

I can add the search bar as a widget but this is not what I want to do. I want to add it specifically to a menu like you would with a product category for example.

Thanks

Looks like I found the solution for you. Please use following code snippet

add_filter( 'wp_nav_menu_items', 'my_wp_nav_menu_items' );
function my_wp_nav_menu_items( $items ) {
    $style = '<style>#site-navigation .aws-container { display: inline-block; }</style>';
    return $items . $style . aws_get_search_form( false );
}

You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets.

• This reply was modified 4 years, 7 months ago by ILLID.

Yes, This did the trick for me!
Thanks alot. Quick other question if that is okay. Is there any way for me to make the search bar do live search with images etc? Also can I change the order of the search bar inside of the menu? I can’t find it in the menu customizer. Also this code snippet seems to add the search bar to every menu bar.

Thanks

• This reply was modified 4 years, 7 months ago by luuctaverne.
• This reply was modified 4 years, 7 months ago by luuctaverne.

Is there any way for me to make the search bar do live search with images etc?

You mean search for images content like title or description? If so, than sorry, but for now it is not possible.

Also can I change the order of the search bar inside of the menu? I can’t find it in the menu customizer.

With this code snippet search form must be added to the end of your navigation menu. Where you want to add it instead?

Also this code snippet seems to add the search bar to every menu bar.

Yes, it is true. If you want to add it only to specific pages please write on what exactly pages you need this form.

Hello,

I want to search bar to be next to the “nieuwe producten” menu item. And also I would like to use the search bar only in the header menu. I tried using a widget in my footer and it added the search bar to it automatically.

Thanks

In this case please use following code instead

add_filter( 'wp_nav_menu_items', 'my_wp_nav_menu_items', 10, 2 );
function my_wp_nav_menu_items( $items, $args ) {
    if ( $args->theme_location === 'top' ) {
        $form = '<style>#site-navigation .aws-container { display: inline-block; }</style>' . aws_get_search_form( false );
        $items = preg_replace( '/(<li[\S\s]*?id="menu-item-8366"[\S\s]*?>*?<\/li>)/i', '$0' . $form, $items );
    }
    return $items;
}

This worked, thank you!