Display Search Box in Primary Menu in Genesis 3.0.3 & above

If you’re using an older version of Genesis Sample theme such as Genesis Sample version 2.3.0, this snippet will NOT work.

This will work only for Genesis Version 3.0.3 & above

Add below code in your finction.php file

// Add a Search Bar to PRIMARY Navigation Menu
add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
function theme_menu_extras( $menu, $args ) {

	if ( 'primary' !== $args->theme_location )
		return $menu;
	
	$menu  .= '<li class="search-bar">' . get_search_form( false ) . '</li>';

	return $menu;

}

Add below CSSline your style.css

.search-form	{
	margin: 0 0 0 25px;
	padding:0;
}
.search-form-submit		{
	padding:10px 20px!important;
	border-radius:0px!important;
	border-top:1px solid #000!important;
	background:#000!important;
}
.search-form-submit:hover	{
	border-top:1px solid #1b9abd!important;
	background:#1b9abd!important;
}
.search-form-input		{
	padding:8px 20px!important;
	max-width: 190px;
}

[type=search] {
    width: auto;
}
input[type="submit"] {
    font-size: 19px;
}
.right.search, .search-bar {
    float: right;
}
.search-form input[type="submit"] {
    margin-top: 0;
}
.genesis-nav-menu .menu-item {
    padding: 7px;
}
/* Adjustment for Mobile Devices (Add this code snippet to the appropriate media queries on your stylesheet) */
@media only screen and (max-width: 1023px) {
.genesis-nav-menu .menu-item {
    padding: 0;
}
.right.search, .search-bar {
    float: left;
}
}
Copyright © 2024 Siam Naulak.
magnifiercrossmenu