search box in top navigation menu

Hey there radhika297,

Hope you’re well today!

This can be done by adding a form in header php.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  <div>
    <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

I strongly suggest adding it in child theme header.php so you don’t lose the changes when you update the theme. In case you’re not sure where to add it you can copy modified header.php I made from here https://pastebin.com/2WCXQJYF.

Hope this helps ??

Best regards,
Bojan

hi bojan

i copied the header.php you made… but the search box comes on the left side. please see the site:

https://www.thestyleaddict.in

anyway i can bring it to the right side?

thanks

Hey there radhika297,

This can be fixed with some custom CSS. Try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin if your theme doesn’t have custom CSS tab.

https://www.ads-software.com/plugins/simple-custom-css

.sf-menu {
float: left;
}

form#searchform {
float: right;
}

This should make the search form on a right in the same line with the menu.

Hope this helps ??

Best regards,
Bojan

hi, yes it worked! thanks a ton… ?? i put the code in the style.css file in the child theme folder.

but if you check the site again- the top menu bar is bigger than before and the SEARCH text + the box is also bigger than the other text in the top menu bar. any ideas?

Hey again,

That is because the form has a bottom margin. You can remove it by adding this CSS:

form#searchform {
margin: 0;
}

Hope this helps ??

Cheers,
Bojan

also the main nav menu comes back to the left by adding this code to the style.css in child theme.

so this is the code in the style.css file in child theme:

#masthead .site-branding {
float: none;
text-align: center;
}

#main-navigation .sf-menu {
text-align: center;
height: 50px;
}

#main-navigation .sf-menu ul {
display: inline-block;
}

.sub-menu li a {
float: left !important;
}

.sf-menu {
float: left;
}

form#searchform {
float: right;
}

form#searchform {
margin: 0;
}

hi bojan,

can you tell me how to centre align the main navigation menu?

thanks
radhika

I too would like to add the search bar to the top menu. I used the code provided and it messed my entire page up. Please take a peek. https://www.mommyrandr.com

Hi im a newbie in website designing and I too would like to add the search bar in the top navigation menu in the fashionistas theme. I have followed the above code but the search form is not appearing inside the top navigation menu on the right side. It is coming below the top navigation menu. Kindly help me with this. My blog is https://www.thelifestylepotpourri.com. I have tried different things but to no avail. Also I wanted the search form to appear the way it comes on wordpress

@priyanka You have added the form out of the nav tag. Please check the code carefully and you would get the issue.

@mommyrandr can you try the code again and this time I will help you out.

Thanks

Hi! Sorry I’m so late in responding. The codes still didn’t work. =(
Just as a reminder I would like the search bar in the top menu bar on the right hand side. My website is https://www.MommyRandR.com

Thank you!

@mommyrandr did you try the code. can you try and let me know