Reply To: Searchbar in main menu

#5869
Ernest Marcinko
Ernest Marcinko
Keymaster

Hi!

Thank you for the kind words!

There is unfortunately no documentation on that because it differs for each and every theme on how to do that. Without programming knowledge is almost impossible to append the search into a menu item. WordPress yet does not support putting shortcodes and other stuff to the navigation menu. (navigation menus are very tricky)

What I did on the demo is I appended the search bar just before the menu container in the theme header.php file. I’m almost definitely sure you will have to edit your themes corresponding header file to achieve the same. There is a short article in the documentation on which shortcode do you need for that.

Basically you need to find the template part which adds the menu into the header, then locate the menu element, and try appending the search php shortcode just before it. There is a good chance it’s still going to look weird, because most menus have very fragile styling.

In your case I can see there is already a search bar there, and the HTML code is something like this:

<div class="container et_search_form_container et_pb_search_visible et_pb_no_animation" style="height: 84px; max-width: 838px;">
		<form role="search" method="get" class="et-search-form" action="studynet.se">
		<input type="search" class="et-search-field" placeholder="Sök …" value="" name="s" title="Sök efter:" style="font-size: 12px;">					</form>
		<span class="et_close_search_field"></span>
</div>

I would try to locate this piece of code and replace the form element with the correspoding search shortcode, like so:

<div class="container et_search_form_container et_pb_search_visible et_pb_no_animation" style="height: 84px; max-width: 838px;">
		<?php echo do_shortcode("[wpdreams_ajaxsearchpro id=1]"); ?>
		<span class="et_close_search_field"></span>
</div>
  • This reply was modified 8 years, 7 months ago by Ernest Marcinko Ernest Marcinko. Reason: formatting fix
Best,
Ernest Marcinko

If you like my products, don't forget to rate them on codecanyon :)