Add search to menu bar

  • I have the attitude them on a local site I’m currently developing (it’s on my home server so no outside access otherwise I would post a link).

    I have disabled the header using a custom .css file as outlined here but I liked the search function.

    Is there any way to have the search box somewhere else – in the menu bar perhaps? I’ve tried the built in search widget in the footer but it’s not the look I am after.

    Anyone got any idea?

Viewing 1 replies (of 1 total)

  • I’m not an expert at this stuff…

    However I did get it to work on my own site: https://jl-gazelle.com

    I have this under Appearance >> Theme Options>> Edit CSS:

    .menu-item.menu-item-search { float:right; width:200px; }
    .menu-search-form { float:right; padding-top:35px; width:250px; }
    .menu-search-form { width:auto; }
    .menu-search-form #s { background:#000000; border:1px solid #252226; font-size:10px; color:#f8f5f9; margin:0 1px 0 0; padding:1px; width:160px; float:left; }

    And I have this added on my functions.php:

    function add_search_to_wp_menu ( $items, $args ) {
    if( ‘primary’ === $args -> theme_location ) {
    $items .= ‘<li class=”menu-item menu-item-search”>’;
    $items .= ‘<form method=”get” class=”menu-search-form” action=”‘ . get_bloginfo(‘home’) . ‘/”><p><input class=”text_input” type=”text” value=”Search” name=”s” id=”s” onfocus=”if (this.value == \’Search\’) {this.value = \’\’;}” onblur=”if (this.value == \’\’) {this.value = \’Search\’;}” /></p></form>’;
    $items .= ”;
    }
    return $items;
    }
    add_filter(‘wp_nav_menu_items’,’add_search_to_wp_menu’,10,2);

    … My search form is very simple.
    You can play with the numbers and colors to adjust to your liking.
    If you google “WordPress search on menu”… there are a lot of blogs that show you how to have a fancier search form.

Viewing 1 replies (of 1 total)
  • The topic ‘Add search to menu bar’ is closed to new replies.

Tags