Search in Top Menu Bar (7 posts)

  1. techboomie
    Posted 10 months ago #

    Can someone tell me how to add a search button to the top of the menu bar.

  2. Ali-Usman
    Posted 10 months ago #

    Here is the code that you can use in your theme templates to put SEARCH on any location you want.

    If you want to insert SEARCH in "Top Menu Bar", you can just go to header.php file & find the MENU CODE and PASTE the following code above it.
    <?php get_search_form(); ?>
    Your SEARCH will be displayed at the frontend.


    Another way to put CUSTOMIZED SEARCH in the header or wherever you want.This will help you to STYLE your SEARCH BUTTON, INPUTS boxes with CSS.
    <form method="get" class="exampleClass" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="Search text here..." name="s" id="s" /><input type="submit" class="anyClassName" id="searchSubmit" value="search" /></p></form>

    NOTE: (If you want to use CUSTOM CSS in your theme.This is the RECOMMENDED way to do this.INSTALL custom CSS PLUGIN (I like My Custom CSS) to add custom CSS without any issue).

    hope this helps...

  3. adar100
    Posted 8 months ago #


    I'm using the fashionistas theme and I have the same problem.

    I want to add search box to the top menu bar, so typed the above code to the header template:
    <div class="header-search"><?php get_search_form(); ?></div>

    after doing so, the search box appears under the top menu and not on the right end side of the top menue

    I dont know css, so can anyone explain how to do it right?

  4. juanita.lum
    Posted 3 months ago #

    how can i get my search button to the right of the search bar instead of below?

  5. Maruti Mohanty
    Posted 3 months ago #

    Hi juanita.lum

    I would say that in this community, we try our best to keep a thread exclusive and so even a slightest change should be addressed in a new thread. I hope you would follow that hence forth.

    Now for your modification.

    You can do this by adding the following codes to the theme's style.css file. Here I would suggest you to make the changes using child theme, so that this change along with other changes made will stay preserved even after theme updates

    .site-sidebar .widget_search .search-field {
        width: 60%;

    Hope it helps!!


  6. juanita.lum
    Posted 3 months ago #

    Thanks it worked beautifully and going forward I will use new thread ;)

  7. Maruti Mohanty
    Posted 3 months ago #

    You are welcome!!

    Glad it helped


You must log in to post.

About this Theme

About this Topic


No tags yet.