Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active March 12, 2017 02:33
Show Gist options
  • Save srikat/9393634 to your computer and use it in GitHub Desktop.
Save srikat/9393634 to your computer and use it in GitHub Desktop.
Adding Search Form and Simple Social Icons to Primary Navigation in Genesis. http://sridharkatakam.com/adding-search-form-simple-social-icons-primary-navigation-genesis/
genesis_register_sidebar( array(
'id' => 'nav-social-menu',
'name' => __( 'Nav Social Menu', 'your-theme-slug' ),
'description' => __( 'This is the nav social menu section.', 'your-theme-slug' ),
) );
add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 );
add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 );
function sws_social_icons($menu, $args) {
$args = (array)$args;
if ( 'primary' !== $args['theme_location'] )
return $menu;
ob_start();
echo '<li class="search-social">';
get_search_form();
genesis_widget_area('nav-social-menu');
echo '</li>';
$social = ob_get_clean();
return $menu . $social;
}
/* Adding Search Form and Simple Social Icons to Primary Navigation
---------------------------------------------------------------------- */
.nav-primary {
margin-bottom: 20px;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
.search-social {
float: right;
list-style-type: none;
list-style-image: none;
padding-top: 6px;
}
.search-social .search-form {
float: left;
width: auto;
margin-right: 10px;
}
.search-social .widget-area {
float: left;
padding-top: 2px;
}
.search-social .simple-social-icons ul li {
margin-bottom: 0 !important;
}
.search-social .simple-social-icons ul li:last-child {
margin-right: 0 !important;
}
@media only screen and (max-width: 1024px) {
.search-social {
float: none;
display: table;
margin: 0 auto 20px auto;
}
}
@media only screen and (max-width: 320px) {
.search-social .search-form {
float: none;
margin-bottom: 20px;
}
.search-social .widget-area {
float: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment