Ready to get started?Download WordPress


Search Bar within the Primary Menu (2 posts)

  1. Scott
    Posted 3 months ago #

    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?

  2. demoman2k10
    Posted 1 month ago #

    Search box Navigation menu widget works on this theme.


You must log in to post.

About this Theme

About this Topic