Placing search box in main menu

[LangsterParticipant]

Hi!

I have installed a search box on the site I built: https://toysandgames.ie/

You can see it in the sidebar. It works really well.

I would like to place the search bar to the right of the main menu buttons (home, shop by age, shop by brand, etc.).

I have tried editing the header.php file (see attached document), and I can make the bar appear under the menu buttons, but not next to them….

Please could you tell me where to place the shortcode: <?php echo do_shortcode(‘[wpdreams_ajaxsearchpro_results id=1 element="div"]‘); ?>

Many thanks for your help.
Peter Lang

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Based on the header file I would try the following:

1. Place the search shortcode after line 107, after the navigation:

	 </nav><!-- #kids_main_nav -->

          <?php echo do_shortcode('&#91;wpdreams_ajaxsearchpro_results id=1 element="div"&#93;'); ?>
          
</div><!--/ .l-page-width-->

2. Reduce the width of the box to 190 pixels, because it won’t fit there. On the search back-end Theme Options -> Overall Box Layout panel, first option.

3. With a custom CSS code, adding floating right property to the search container to position next to the menu:

.asp_main_container {
    float: right;
}

This will put the search box most likely to the left, as the menu floats to the right sooner. If you want to switch the position of the menu and the search, then try this custom CSS code to float the menu to the left side:

nav#kids_main_nav {
    float: left !important;
}

This is just a quick suggestion, the final solution might need a bit more CSS code 🙂

• This reply was modified 8 years, 6 months ago by  Ernest Marcinko.

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

[LangsterParticipant]

Thank you very much for that. That works well.

On a mobile however it doesn’t look to good with the menu icon in the middle, the search box is underneath, aligned right.

If my client does not like it, perhaps I could just have the search icon at the side of the page, always in the same position. Would that be a shortcode added to the header to achieve that?

Thanks again for your help.

[Ernest MarcinkoKeymaster]

You are welcome.

In that case I rather recommend putting the shortcode just before the closing body tag in the footer, then configuring the compact search box layout settings. That way the search is in a fixed position, and the footer placement is the safest.

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

[Author]

Posts