March 26, 2017 by Susan Ramsey
/* --- Finally, it’s time to style it. Your CSS will depend on which theme
you are using. Here’s the styling I used on the Pretty Darn Cute Fun theme,
after I relocated Primary Navigation: --- */
/* Nav Widget Styling
------------------------------------------------*/
.genesis-nav-menu .simple-social-icons ul li {
margin: 0 0 0 0 !important;
padding: 0 !important;
}
.genesis-nav-menu .simple-social-icons ul li a {
background: transparent !important;
padding: 5px !important;
}
.genesis-nav-menu .widget-area .search-form {
margin-right: 7px;
}
.genesis-nav-menu .widget-area {
float: right;
padding: 5px 15px 0 0;
}
// Once we’ve registered the widget, we will need to “hook” it, which sets the location for the widget. Add this to your functions.php file:
//* Navigation Search and Social Icons
add_filter( 'genesis_search_button_text', 'smr_search_button_text' );
function smr_search_button_text( $text ) {
return esc_attr( '' );
}
add_filter( 'genesis_nav_items', 'smr_social_icons', 10, 2 );
add_filter( 'wp_nav_menu_items', 'smr_social_icons', 10, 2 );
function smr_social_icons($menu, $args) {
$args = (array)$args;
if ( 'primary' !== $args['theme_location'] )
return $menu;
ob_start();
genesis_widget_area('nav-widget-area');
$social = ob_get_clean();
return $menu . $social;
}
// First, we’ll need to register the widget. Open your functions.php file, and add the following:
genesis_register_sidebar( array(
'id' => 'nav-widget-area',
'name' => __( 'Nav Widget Area', 'smr' ),
'description' => __( 'This widget appears in your navigation bar.', 'smr' ),
) );