Add Search Icon to Genesis Menu

Often times you might want to add the search functionality to your page without taking up too much space. A search icon in the menu is a nice way to do that. This is what mine looked like:

Here’s how I did it:

1) Add this code to your functions.php file.
(Please note- this only works for Genesis HTML 5 themes)
(Double note – never make changes to your PHP files without having ftp or cpanel access and a backup.)
(Triple note – this will work for primary or secondary (if you read the code and make the small change) menus. It will not work if you are using a menu in the Header Right widget area.)

/*------Add search to menu -------*/
//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
	return esc_attr( ' ' );
}

add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
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;

	ob_start();
	get_search_form();
	$search = ob_get_clean();
	$menu  .= '

• ‘ . $search . ‘

‘; return $menu; }

2) Add this to your style.css file if you are using a child theme, or to a custom CSS plugin if not.

.search-form input {
	background: url('images/search.png') center right no-repeat;
	background-color: transparent;
	background-size: 30px 30px;
	border: 0;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}
.search-form input:focus {
	background: #fff;
	border: 1px solid #c3c0ab;
	color: #333;
	cursor: text;
	outline: 0;
	width: 230px;
	position: absolute;
	right: 100px;
}
.search-form input[type="submit"] { 
display:none;
}

.search-form input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}
.genesis-nav-menu > .right {
	margin-top: 20px;
	width: 30px;
}

(Note – make sure to remove any other .search-form CSS or at least make sure this comes after any other so it doesn’t get overwritten.)

You will also need a search icon. The one I used was 30px x 30px and was white with a transparent background, a png file. As you can see from the CSS, I uploaded mine into the images folder of my theme, but you can put yours where ever you want and just adjust the image url.

There are probably better ways to do this. Please let me know if you have any.