How to align social icons all in one row in the menu?

  • Hi, Anyone knows how to align social icons all in one row?

    I am using Genesis and a plugin called social media widget, but the icons are aligned vertically and I want them horizontally, below is the code I am using at functions.php, probably I need to add some instruction to do so. Anyone can tell? thank you.:

    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 ( ‘secondary’ !== $args[‘theme_location’] )
    return $menu;
    ob_start();
    dynamic_sidebar(‘Social Menu’);
    $social = ob_get_clean();
    return $menu . $social;
    }

Viewing 5 replies - 1 through 5 (of 5 total)

  • The alignment can most likely be resolved with CSS, so a site link will be required…

    Thread Starter RiosWebDesignCom

    (@infocms)

    Sorry about that, https://www.gosynergy.org

    Use the following as a starting point for your CSS journey!

    .socialmedia-buttons {
  display:inline-block;
}

.socialmedia-buttons a {
  float:left;
}
    Thread Starter RiosWebDesignCom

    (@infocms)

    Thank you Evan, that works! now I will need to figure out how to bring them closer, between them.

    It is from this CSS:

    .menu-secondary a {
background: #2952C8;
border-top: 0px solid #DDDDDD;
border-bottom: 0px solid #DDDDDD;
border-left: 0px solid #DDDDDD;
border-right: 0px solid #DDDDDD;
margin: 0 0px 0 0px;
padding: 5px 15px 5px 15px; /*THIS IS IT*/
color: #FFFFFF;
text-decoration: none;
display: block;
position: relative;
}

    But, editing that changes other items also. I would add a new class specific to those items only and add the css for it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to align social icons all in one row in the menu?’ is closed to new replies.