Search Bar in Navigation Menu

[pennywisemama]

Hi, I finally figured out how to add a search bar to my top navigation menu. Now, I just can't figure out the right css to get it to move to the right side. I have the magazine pro theme. Any help would be appreciated. Thanks!

http://thepennywisemama.com/

[pennywisemama]

Ok, I was able to move it to the right but now I need to make the background white and make the box bigger. How do I do that?

[neilgee]

You can change in your style.css on line 781 - the background color value for the color and the padding for the size -

.genesis-nav-menu .search-form input {
background-color: #1cd5ff;
border: 1px solid #222;
color: #fff;
text-transform: uppercase;
width: 180px;
padding: 10px 20px;
}

Here I changed the value to #1cd5ff and changed the padding to make it wider (20px)

---

Neil Gee
WP Beaches
Coolest Guides

[pennywisemama]

Perfect! Thank you!

[elucidateTX]

Isn't this possible to do with no coding?

I'm using the Enterprise Pro theme, and I can go to the Genesis>Theme Settings menu. There, I look for the subsection titled "Navigation." In that subsection there's a drop-down box for Primary Navigation Extras. One of those items is Search Form.

This worked well for me. It put a search field on the right in my primary navigation bar, and I didn't have to touch the code.

[kiso]

Hello penny Could I explain how you set the menu in search?

[sasamarkovicks]

this theme are perfect and good but this for search is anoying me

---

simple page

[kiso]

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 ( 'primary' !== $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;
}

[Author]

Posts