Add Amazon style search bar in top menu

Hey Illingco,

Thank you for the inquiry.

Do you have an embed code or script for the search bar? You may need to create a custom shortcode for the search bar, add another menu item next to the “SHOP & ORDER NOW”, then place the new shortcode in the Navigation Label field of the new menu item.

For more info about custom shortcodes, please check the documentation below.

// https://codex.wordpress.org/Shortcode_API#Overview

Example of the custom shortcode function.

// amazon search bar shortcode
function av_amazon_search_bar_cb( $atts ){
	return "amazon search bar embed code or script here";
}
add_shortcode( 'av_amazon_search', 'av_amazon_search_bar_cb' );

You can place the [av_amazon_search] shortcode in the Navigation Label field of the menu item.

Best regards,
Ismael

Hi,

Thank you for the update.

Do you have the embed code for the Amazon search bar? Please provide it in the private field so that we can integrate it with the custom shortcode.

Best regards,
Ismael

Hi,

Thank you for the info.

Please follow this documentation to create a custom shortcode for the default search bar.

// https://kriesi.at/documentation/enfold/search/#search-bar-shortcode

You can then use that [avia_search] shortcode in the Navigation Label field of the new menu item beside the “SHOP & ORDER NOW” menu item. The menu items can be edited in the Appearance > Menus panel.

To adjust the size, position and appearance of the search bar, please use this css code.

#top #header #s {
    width: 100%;
    position: relative;
    padding: 11px 47px 11px 5px;
    z-index: 1;
    margin: 0;
    box-shadow: none;
    border-color: red;
    background-color: blue;
    color: green;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: green;
  opacity: 1; 
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: green;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: green;
}

Adjust the values as necessary.

Best regards,
Ismael

Hi,

Put PHP in a functions snippet.

Did you place the custom shortcode in the functions.php file? We may need to access the site in order to properly implement the modification. Please provide the login details in the private field.

Your CSS doesn’t seem to change anything.

Have you tried to temporarily disable the Enfold > Performance > File Compression settings?

Best regards,
Ismael

Hi,
Thank you for your patience and the password to your site but I don’t see a user name, please include.
I see the [avia_search] shortcode in your topbar, it looks like you have not added the code to the end of your child theme functions.php file in Appearance ▸ Editor: add_shortcode('avia_search', 'get_search_form'); or if you did the symbols may be converted, please ensure to copy the code from the forum and not an email notification so the symbols are not converted. You said that you are using SearchWP, did you add the code for it to be the search for your site? And doesn’t it have it’s own shortcode, this page explains how to adjust the SearchWP shortcode for the options you want, you should end up with something like this: [searchwp_search_form engine="default" var="searchvar" button_text="Find Results"] (this code may not work on your site, follow the instructions)
Your asking for a Amazon search bar, have you thought about adding a larger one like in our Knowledge Base Demo below your menu? We have a search bar element:

that will allow you to adjust the style better it you want a big search bar like on Amazon.

Best regards,
Mike

Hi,
Thanks for the login, if you plan on using the WPSearch perhap you should use it’s shortcode so it will have the correct functionality, I see that you have not set it up yet.

To add the search bar in the header you will need to add a Header Widget Area like you linked to above, but in that case there is not enough room there on mobile devices, are you sure you don’t want to add it under the menu so there is more room and east for people to use?

Best regards,
Mike

Hi,
Thank you for your patience, I see that you are using the Code Snippets plugin so I will add the customizations in it,
I also see that you are using the heading setting Logo left, menu below, I disabled the Shrinking Header because it didn’t give enough room for the search box. The following code will only show the search bar on screens larger that 990px when there is enough room.
So first I added the function to add the widget to the header as a code snippet:

add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header' );
}

Then the custom header widget with a search widget:

then I added this code to place the widget after the logo in the header:

function header_widget_placement() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    var width = $(window).width();
    if ((width >= 990)) {
   $('#header_main .widget').detach().insertBefore('.av-logo-container .inner-container #menu-item-shop');
    } else {}
  })(jQuery);
});
 </script>
  <?php
}
add_action('wp_footer', 'header_widget_placement', 99);

then this css to style and order the header elements:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}
.av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
}
#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform {
	 width: 100%;
}
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

This is the final result:

Best regards,
Mike

Hi,
Yes you can adjust the css to suit, glad to hear you like this.

Best regards,
Mike