minimal search form in navbar?

  • as you can see here on https://www.baserunningteam.it/ i managed to put a searchform in the navbar, using this old snippet i found on this forum.

    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;
}

    it doesn’t look very nice, don’t you think?

    – can i style it completly wit css?
    – removing the button and text “search for”, or show it IN the form, as in this cool example?
    – and finally, can i align the searchform on the same line of the navbar menu?

Viewing 7 replies - 1 through 7 (of 7 total)

  • Maybe try a different approach by using the new Header Area widget?

    Thread Starter narcopastello

    (@narcopastello)

    i’m already using the extra widget for scrolling news after the header and thanks for that!

    i was looking for a way to display the searchform IN the header.

    with my basic knowledge i’d change __after_header with __after_navbar in this part

    // Place the widget area after the header
add_action ('__after_header', 'add_my_widget_area', 0);
function add_my_widget_area() {
	if (function_exists('dynamic_sidebar')) {
	dynamic_sidebar('Extra Header Widget Area');
	}
}

    and this works, i have my searchform IN the header…
    but very bad looking… is there another __after_something to put it on the same line of the menu?

    besides, if you have any other suggestion to style the searchform the simpler as possible, something like this

    I have done what you are looking for.

    I modified your php code just a bit.
    And took some css code from the page you were refering to.

    $items .= ‘<li class=”header_search”>’ . $searchform . ”;

    This is my css code.
    .header_search #searchform .screen-reader-text{
    display:none;
    }

    .header_search #searchform{
    width:150px;
    float:left;
    margin:0px auto;
    }
    .header_search #s {
    padding:2px 15px 2px 30px;
    margin:3px;

    background: url(‘images/search.png’) no-repeat 8px 6px;
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;

    }
    .header_search #searchsubmit {
    display:none;
    }

    My test site is https://f01.joodit.com

    Hi erikture

    can you confirm how you modified the php code to achieve that result.

    thanks

    This is what I wrote in the functions.php file.

    add_filter(‘wp_nav_menu_items’, ‘add_search_menu’, 10, 2);
    function add_search_menu($items, $args) {
    ob_start();
    get_search_form();
    $searchform = ob_get_contents();
    ob_end_clean();
    $items .= ‘<li class=”header_search”>’ . $searchform . ”;
    return $items;
    }

    Thread Starter narcopastello

    (@narcopastello)

    in the end i created a copy of /parts/class-header-header_main.php in my child theme… and i edited from line 298

    else { //when hooked on __navbar
			$html = sprintf('<%1$s class="%2$s inside site-description">%3$s</%1$s>',
					apply_filters( 'tc_tagline_tag', 'h2' ),
					apply_filters( 'tc_tagline_class', 'span7' ),
					apply_filters( 'tc_tagline_text ', __( esc_attr( get_bloginfo( 'description' ) ) ) )
			);

		}

    with

    else { //when hooked on __navbar
			$html = sprintf('<form role="search" method="get" id="searchform"; >
    <div><label class="screen-reader-text" for="s"></label>
        <input type="text" placeholder="Cerca" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="🔍" />
    </div>
</form>'
			);

		}

    … and some css.

    Thanks very much.

    By following erikture’s approach I have been able to create a search form in the header. However, my css skills are limited and try as I might to get something that looks like https://f01.joodit.com I seem unable to make any change to the css that affects the search form. I’ll keep trying!!

    Thanks again for the helpful posts.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘minimal search form in navbar?’ is closed to new replies.