Skip to content

Instantly share code, notes, and snippets.

@topleague
Last active December 3, 2019 07:12
Show Gist options
  • Select an option

  • Save topleague/2fc00deb8c4ad20a1c4f9efba87082c6 to your computer and use it in GitHub Desktop.

Select an option

Save topleague/2fc00deb8c4ad20a1c4f9efba87082c6 to your computer and use it in GitHub Desktop.
Search Bar in Primary Menu in Genesis
//* REMOVE HEADER RIGHT WIDGET AREA AND SHOW PRIMARY NAV MENU WITH SEARCH BOX
//* Credit: Sridhar Katakam
// Step #1: Remove Header Right widget area.
unregister_sidebar( 'header-right' );
// Step #2: Remove Primary Navigation's structural wrap.
add_theme_support( 'genesis-structural-wraps', array( 'header', 'menu-secondary', 'footer-widgets', 'footer' ) );
// Step #3: Rename primary and secondary navigation menus.
add_theme_support( 'genesis-menus', array(
'primary' => __( 'Primary Navigation Menu', 'genesis-sample' ),
'secondary' => __( 'Footer Menu', 'genesis-sample' ) )
);
// Step #4: Reposition the primary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav' );
// Step #5: 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;
}
/* Adjustment to Optimize Search Bar in Header Menu */
.genesis-nav-menu>.search-bar, .nav-primary {
float: right;
}
.site-header .search-form {
width: 100%;
border-radius: 35px;
}
/* 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 > .search-bar {
float: left;
}
.nav-primary {
float: none;
clear: both;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment