Placing search box in main menu

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Placing search box in main menu

This topic contains 3 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 6 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #6180
    Langster
    Langster
    Participant

    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.
    #6188
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 🙂

    Best,
    Ernest Marcinko

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


    #6190
    Langster
    Langster
    Participant

    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.

    #6191
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.