Search on menu?

I want to add search on the top memu navigation. How can I do that?

Hello there,

There is no option to add search bar on the top menu. but you can try to add it manually by modifying the code.

You can contact codeable to help you if necessary

Hi guys,

Take a look at my code (functions.php), it’s working ok!

/* BEGIN */

add_filter(‘wp_nav_menu_items’,‘search_box_function’, 10, 2);
function search_box_function( $nav, $args ) {
if( $args->theme_location == ‘primary’ )
return $nav."<li class=‘menu-header-search’><form action=‘http://www.aurumnutricao.com.br/’ id=‘searchform’ method=‘get’><input type=‘text’ name=‘s’ id=‘s’ placeholder=‘Pesquisar…’></form>";

return $nav;

}

/* END */

@Awan, could you help me how to proceed to change position betwenn this search form and cart’s button?

Thanks!

Hi Wendel
Sorry for the late response and thanks for share the code to adding the search form to the top menu, its worked as well as I see in your site in here http://www.aurumnutricao.com.br/

To move the position between cart button and the search form, you can try to use these css code below:

form#searchform {
    position: absolute;
    top: 45px;
    right: 160px;
}

Regards,
Awan

Hi @Awan,

Thanks for your help again, the code worked very well.

Just to inform, I could insert too a Woocommerce search products (in fact, I changed the code above by follow, because I think a Woocommerce search is more effective in a ecommerce):

add_filter(‘wp_nav_menu_items’,‘woo_custom_product_searchform’, 10, 2);
function woo_custom_product_searchform($items, $args) {

/* ------ BEGIN ------ */

if( $args->theme_location == ‘primary’ )

$items .= ‘<form role=“search” method=“get” id=“searchform” action="’ . esc_url( home_url( ‘/’ ) ) . '">

		&lt;label class="screen-reader-text" for="s"&gt;' . __( 'Pesquisar por:', 'woocommerce' ) . '&lt;/label&gt;
		&lt;input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Pesquisar produtos...', 'woocommerce' ) . '" /&gt;

<input type=“hidden” name=“post_type” value=“product” />

	&lt;/form&gt;';

return $items;
}

/* ------ END ------ */

Noted! Thanks @Wendel

@saiftheboss7 you can follow the instruction how to add the search form to the top menu. The custom code for the search form is working great.

Thank you for he advice - however I tried this, I copied the text and then put it in the functions.php (right at the top of the coding page) but nothing has changed on mobile? The site is wwww.tanzania.tutaabsoluta.net

thanks

Hi @lchadwicksmith,

Please use the code below:

/* —— BEGIN —— */

add_filter(‘wp_nav_menu_items’,’woo_custom_product_searchform’, 10, 2);
function woo_custom_product_searchform($items, $args) {

if( $args->theme_location == ‘primary’ )

$items .= ‘<form role=”search” method=”get” id=”searchform” action=”‘ . esc_url( home_url( ‘/’ ) ) . ‘”>

<label class=”screen-reader-text” for=”s”>’ . __( ‘Pesquisar por:’, ‘woocommerce’ ) . ‘</label>
<input type=”text” value=”‘ . get_search_query() . ‘” name=”s” id=”s” placeholder=”‘ . __( ‘Pesquisar produtos…’, ‘woocommerce’ ) . ‘” />
<input type=”hidden” name=”post_type” value=”product” />

</form>’;

return $items;
}

/* —— END —— */

The code is the same, but when I copied to the forum, I messed up the place of BEGIN, so it didn’t work out properly. Now I’m sure it will work!

Hi Wendel,

Actually your previous code is working, but the problem is because the quote and double-quote is changes when it copied to functions.php.

So we have to change with " and to '

Hi,
Where on WP do I put in this code for the search button to get it on toop of the site?
Thanks in advance!

Hi Elisa,

You have to create a child theme first, then put the code snippet in above to the functions.php in your child theme.

Thank you for the quick reply!
How do I create a child theme!? And what is is? Another theme?
Thank you in advance!

Hi Elisa, please check the URL which I’ve shared with you in my previous reply.
If you need more help on creating a child theme, please contact upwork.com.

Regards,
Awan

Hi,

Is it possible to center align the searchbar in the header?

The url to the website is www.phrasebank.net

Thanks very much in advance,

Shotaro

Hi @awan,

I’ve just started two webpages (a complete newbie to Wordpress) – one uses the Sydney Pro theme: http://ccdatahub.ipsl.fr and the other uses the Sydney theme: http://ecoceana.org/ – each with their own child theme and style.css, functions.php files, and header and footer scripts.

So far I have included the same code (as listed above) in these files on both sites to imbed a expandable Search bar in the menu. It works in ecoceana, but flickers in ccdatahub

I would be very grateful if you could explain to me how to stop the flickering and why the code is executing differently on the two sites.

Hoping you can help! All the best, Tilla

Hi @atillahungry,

The search field in ccdatahub is flickering because there is no more place for the search field to expanded. Please add this CSS code to solve the issue:

.site-header .col-md-4 {
    width: 20%;
}
.site-header .col-md-8 {
    width: 80%;
    justify-content: center;
    display: flex;
}
#mainnav {
    float: none;
}

Thanks @awan! It worked :slight_smile:

1 Like

Hi,

I copied the code for my website but I’d like the search bar to be placed next to the menu, not under it.
Could you help me please ?

Here’s my website : katia-razafin-oc.fr

Hi,

Looks like you need to increase the width of the logo+menu container. Please try to add this CSS code:

.site-header .container {
    width: 100%;
}

Thanks a lot for your reply. In the meantime, I found another way to increase the site header.

Thanks a lot