Search in menu bar

Pinbin
1

Hi,

I’d like to add search to the menu bar. I’ve tried several solutions provided on other sites, but none have worked.

I tried this code, but it adds the search under the menu bar instead of horizontal with the other menu items.

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
 
        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();
 
        $items .= '<li>' . $searchform . '</li>';
 
    return $items;
2

First of all add this code to header.php

<?php get_search_form(); ?>

Right after this block of code

          <?php if ( has_nav_menu( 'main_nav' ) ) { ?>
          <?php wp_nav_menu( array( 'theme_location' => 'main_nav' ) ); ?>
          <?php } else { ?>
          <ul><?php wp_list_pages("depth=3&title_li=");  ?></ul>
          <?php } ?>

Now add this to style.css or any Custom CSS plugin or in Child Theme style.css depending on your setup.

label.screen-reader-text {
    display: none;
}
form#searchform {
    display: inline-block;
    float: left;
    margin-top: -20px;
}
3

That is just beautiful. Thank you, it works perfect!

4

My site is offline until I populate the pages with what I want. It will be a place where you can download free (abandonware, freeware & opensource) software. www.software4free.net

Here is what it will look like…plus or minus a few tweeks.

5

I did the same but not working (www.sacalatorim.ro)Instead of putting the search on the same menu line (but in the right) I have all menu items under the slider. This i`ve add is css:
abel.screen-reader-text {
display: none;
}
form#searchform {
display: inline-block;
float: right;
margin-top: -20px;
}
Firstly I have added this code <?php get_search_form(); ?> to header.php but there I dont have the block of codes you were showing above.

6

@romania.marius

This thread is related to completely different theme - Pinbin.

Please open your own thread. But I can already say that it won’t be possible to add search right on the navigation bar for that theme. You can add it inside header and there are some support thread here on forum already.

Here are some example how to get it done via Child Theme.

7

With me adding the php code worked. But somehow I struggle with the styles.css.
I want to make it float on the very right. What code do I have to add where to make this work?

Many thanks.

www.scandalous.ch

8

Try it like this:

form#searchform {
    float: right;
    margin-right: 10px;
}

I added a tiny margin on the right to make it not to sit right on the edge.

9

Thank you from me too. Aigars, I’m loving the simplicity of this theme.