Add a search form to a navigation menu

[dekraan]

Hi all,

I have created a utility bar section above my header.

In it, I am displaying a menu called top-menu through a widget.

I would like to add a search form at the right of this menu, inline. But adding a search form widget does not seem to work. It displays the search form below my search bar, even if I add a width to it.

I found this page:

Add Nav Extras

But that does not seem to do anything...

Can anyone tell me how I can add a search form/box next to a menu widget in my top section?

http://www.corrector.nl

[Brad Dalton]

You can add the search widget to the header right widget area.

Or

Use the code you linked to which will need some small modification and possibly some custom CSS depending on the theme you're using.

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

adding it to the header right widget area doesn't work for my design unfortunately.

Do you know how to modify the code I linked to? Changing the CSS is probably something I could do, but php is not one of my skills...

I am using the parallax pro theme.

I am not even sure what should happen if I add the code above to my functions file. Does a search box appear out of the blue, do I have to add something still? And how should I change it to match my current set up?

Hope you can lend a hand!

[Brad Dalton]

There's 2 solutions in the code snippet.

Step 1 : //* Uncomment this block to add a search form to the navigation menu

Step 2 : Inspect the search form and use CSS to display it inline. The CSS for this will vary per theme.

If you need help with CSS, please link to a live site with the code installed.

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

thank you for checking on me.

I have the code live, if everything went well. But I can't figure out how to change the css.

My site is live here:
http://www.corrector.nl

the search form is there, but is being displayed below the utility-bar-right.

[Brad Dalton]

Where is the search form?

Also, what CSS have you changed or added?

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

the form is there when I inspect the html (sorry for my lousy copy and pasting skills), but as you noticed as well, it is not showing up.

<div class="utility-bar">
<div class="wrap"><div class="utility-bar-right">
<section id="nav_menu-3" class="widget widget_nav_menu">
<div class="widget-wrap">
<div class="menu-secondary-navigation-container">
<ul id="menu-secondary-navigation" class="menu">
<li id="menu-item-1929" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1929">Wat houdt tekstcorrectie in?
</div></div></section>
<section id="search-3" class="widget widget_search"><div class="widget-wrap"><form class="search-form" itemprop="potentialAction" itemscope="" itemtype="http://schema.org/SearchAction" method="get" action="http://www.corrector.nl/" role="search"><meta itemprop="target" content="http://www.corrector.nl/?s={s}"><label class="search-form-label screen-reader-text" for="searchform-58e0108c4c3ed">Zoek op deze website</label><input itemprop="query-input" type="search" name="s" id="searchform-58e0108c4c3ed" placeholder="Zoek op deze website …"><input type="submit" value="Zoek"></form></div></section>
</div></div></div>

As for the CSS, I don't think I changed anything. Might have given the search-form a 50% width. And this one came with the utility-bar from Carrie Dils' code:

.utility-bar input[type="search"] {
background: inherit;
padding: 10px 0 0;
padding: 1.0rem 0 0;
}

[Brad Dalton]

What theme are you using?

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

it's the Parallax Pro theme!

I'm totally confused about it. I did this (I think): add the code from the nav extra post to my functions.php, uncommented both items and changed primary to secondary.

Then, in the utility-bar-right section (above the header), I added a menu widget where I selected 'Secondary menu'.

I've also added the search widget to the same section. I think that is the one that is invisible. No idea what the snippet I added to functions.php does.

Did I miss a step? Is it a css problem? Or something else?

[Brad Dalton]

Only uncomment one. This one

//* Uncomment this block to add a search form to the navigation menu
	/*
	ob_start();
	get_search_form();
	$search = ob_get_clean();
	$menu  .= '<li class="right search">' . $search . '';
	*/

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

Fixed that, but it does not seem to change anything. This is what I have in my functions.php file right now:

add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
/**
* Filter menu items, appending either a search form or today's date.
*
* @param string $menu HTML string of list items.
* @param stdClass $args Menu arguments.
*
* @return string Amended HTML string of list items.
*/
function theme_menu_extras( $menu, $args ) {
//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
if ( 'secondary' !== $args->theme_location )
return $menu;
//* Uncomment this block to add a search form to the navigation menu

ob_start();
get_search_form();
$search = ob_get_clean();
$menu .= '<li class="right search">' . $search . '';

//* Uncomment this block to add the date to the navigation menu
/*
$menu .= '<li class="right date">' . date_i18n( get_option( 'date_format' ) ) . '';
*/
return $menu;
}

[dekraan]

PS: if you need to see something else code wise or else, just let me know. I want to help any way I can to try to find out what's going (wr)on(g).

[Brad Dalton]

The problem here is your theme doesn't use a before or after header menu. It uses a footer menu.

You can add the search widget to the header right widget area

Or

the footer menu.

Where did you want to add it?

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

Ah, ok! I did not know that you can't just put widgets in every section.

I want to add it to my 'utility-bar-right' section, which is positioned above the header like this:

add_action( 'genesis_before_header', 'utility_bar' );
/**
* Add utility bar above header.
*
* @author Carrie Dils
* @copyright Copyright (c) 2013, Carrie Dils
* @license GPL-2.0+
*/
function utility_bar() {

echo '<div class="utility-bar"><div class="wrap">';

genesis_widget_area( 'utility-bar-left', array(
'before' => '<div class="utility-bar-left">',
'after' => '</div>',
) );

genesis_widget_area( 'utility-bar-right', array(
'before' => '<div class="utility-bar-right">',
'after' => '</div>',
) );

echo '</div></div>';

}

I just copy pasted this from the Carrie Dils blog. But it should be in the right bar. Do I need to add something to my code in order to make this section 'search form proof'? And what?

[Brad Dalton]

I think you can add the search widget into one of those widget areas.

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

At the moment I've got it in the utility bar right section, together with the secondary menu. But then it screwes up my header Heights and positions the search box underneath the utility bar.

[dekraan]

Hi @braddalton,

I've got it figured out, using firebug. I added the following to my CSS and it works like a charm now 🙂

.utility-bar section {
display: inline-block;
vertical-align: top;
}

Not sure why this works yet, but I like the end result. Only some styling required now. Thanks a lot for your help!

[Brad Dalton]

No worries.

---

Tutorials for StudioPress Themes.

[Author]

Posts