Simple Social Icons and Search Bar in Navigation Menu

[acleanplate]

I'm having a slight issue formatting a change I made to the primary navigation to get it to display the Simple Social Icons widget in line with and to the left of the search bar. You can see at acleanplate.com it is currently sitting underneath the search bar, hanging over my header space. I was wondering if someone could tell me what I've overlooked (I'm sure it's something obvious)! I am using the Magazine Pro child theme which comes with the search bar already placed in the primary nav menu. Here is the code I have to insert the Simple Social Icons in functions.php:

genesis_register_sidebar( array(
	'id'          => 'nav-social-menu',
	'name'        => __( 'Nav Social Menu', 'magazine-pro' ),
	'description' => __( 'This is the nav social menu section.' ),
) );

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;
}

And to style them, in style.css:

.genesis-nav-menu .widget {
    float: right;
}

.genesis-nav-menu .simple-social-icons ul li {
	margin-bottom: 0 !important;
	margin-top: 0.7rem !important;
}

.genesis-nav-menu .widget-area {
    float: right;
}

.genesis-nav-menu .widget-area {
    float: right;

}

Thanks for any insights!

http://www.acleanplate.com

[Victor Font]

You have the widget loading in your code after the search form, which means the icons will be to the search form's right, not left as you desire. The widget has no width set so it is taking up 100% of the width. If you want to add them to the menu, just add them as menu items. This will show you how: http://victorfont.com/add-social-media-icons-to-main-navigation/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[acleanplate]

Thanks, but I want to be able to keep the display of the social icons branded with my site, and it doesn't look like Font Awesome has that capability.

I'm comfortable with styling but not so much functions. If someone can help me out with getting the widget to load before the search bar, I'd really appreciate it!

[Author]

Posts