Support » Themes and Templates » Search Bar within the Primary Menu

Search Bar within the Primary Menu

  • Scott


    I’ve been attempting to add a searchbar within my primary menu, however I cannot get the CSS to apply. The search bar does appear at the end of my primary menu, but it doesn’t look good.

    I used the code off of http://diythemes.com/thesis/rtfm/add-search-form-wp-wordpress-nav-menus/

    PHP placed in “theme-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="Enter Text & Click to Search" name="s" id="s" onfocus="if (this.value == \'Enter Text & Click to Search\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Enter Text & Click to Search\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="search" /></p></form>';
    $items .= '</li>';
    return $items;

    I wasn’t sure where to place the CSS so I tried multiple locations: the “Edit CSS” which is supposed to be the last CSS applied, style.css, header.php in style tags, and custom-styles.php.

    .custom .menu-item.menu-item-search { float:right; width:260px; }
    .custom .menu-search-form { float:right; padding-top:3px; width:250px; }
    .custom form.menu-search-form { width:auto; }
    .custom form.menu-search-form #s { background:#fff; border:1px solid #000; font-size:11px; margin:0 2px 0 0; padding:2px; width:180px; float:left; }
    .custom .menu-search-form input#searchsubmit.my-wp-search { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; text-transform:uppercase; }

    Any thoughts on how to manipulate the appearance of the search bar once it prints onto the menu?

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Search Bar within the Primary Menu’ is closed to new replies.