12/13/2015 - 4:31 PM

How to add a widgeted area in Navigation bar in Genesis

Sridhar Katakam - Dec. 29, 2013

#nav .widget {
	float: right;
	margin-right: 2px;

.socialmedia-buttons {
	margin-top: 6px;
	margin-right: 3px;

.menu-primary .socialmedia-buttons a {
	float: left;
	border-right: none;
	padding: 0;

.menu-primary .socialmedia-buttons img {
	margin-bottom: 0;

// update - add this also:

.genesis-nav-menu .widget-area {
    float: right;
    padding-top: 2.2rem;
Go to Appearance -> Widgets and drag Social Media Widget widget into ‘Social Menu’ sidebar. Configure the settings and enter in the URLs of your desired social sites. Here is a screenshot of settings used in my example.
(Optional: If you would like to display social media icons at the right in Primary Navigation)

Install and activate Social Media Widget plugin.
// Use the following PHP code regardless of which child theme is active.
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' ),
) );

// May only need the following code. But add the above snippet if having difficulty

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;
	$social = ob_get_clean();
	return $menu . $social;
Install and activate Genesis Simple Sidebars plugin. Go to Genesis > Simple Sidebars and create a new sidebar called say, Social Menu.

Update on Sunday, December 29, 2013: See

In this article I want to document the code to add a right floating widgeted area in Primary Navigation in Genesis. One of the most common uses for this sidebar would be displaying social media icons using a plugin’s widget.