askdesign
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.
// UPDATE:
// 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;
	ob_start();
	genesis_widget_area('nav-social-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.
https://sridharkatakam.com/how-to-add-a-widgeted-area-in-navigation-bar-in-genesis/

Update on Sunday, December 29, 2013: See http://www.sridharkatakam.com/adding-simple-social-icons-navigation-bar-genesis/

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.

Resources:
http://www.billerickson.net/genesis-wordpress-nav-menu-content/#comment-7474

http://www.rfmeier.net/add-a-custom-primary-nav-extras-within-genesis/

http://cobaltapps.com/forum/forum/main-category/main-forum/1929-how-to-get-links-on-left-and-right-side-of-nav-bar