Sridhar Katakam

Genesis and WordPress Tutorials

How to add Simple Social Icons to Infinity Pro’s header

by 9 Comments

In the members-only forum, a user asked:

Hello Sridhar,

I was wondering how to add simple social icons to the far right-hand side of Infinity Pro’s header ? I would like them to be responsive for mobile devices. I’m guessing this can somehow be done by re-enabling the header right widget area.

Thank you,

We can get rid of the code that removes Header Right widget area in Infinity Pro and use Flexbox's order property to make social icons placed inside the widget area appear at the right of site header like this:

On smaller screens:

Step 1

In functions.php delete

// Remove header right widget area.
unregister_sidebar( 'header-right' );

Step 2

Install and activate Simple Social Icons if you haven't already.

At Appearance > Widgets, drag a Simple Social Icons widget into the Header Right widget area and configure it.

Set the Alignment to Align Center.

Step 3

Edit style.css.

a) Above the media queries, add

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar,

    That was quick! Excellent as always.

    I’ve just implemented this on a site and had one small question. When I apply the code my navigation menu goes off center and sits further to the right. Is there a way to keep the navigation in the center with the logo and social icons an equal distance apart either side?

    Reply

        • Since you do not seem to be using the off-canvas feature, try removing the right margin for Header Right widget area like so:

          .header-widget-area {
    order: 1;
    /* margin-right: 50px; */
}
          Reply

          • I tried it but it pulls everything (the logo, nav and social icons) even further to the right.

            If I remove the below CSS then it moves the site title left and re-centres the navigation but then the social icons aren’t floated all the way to the right, they’re pulled in towards the navigation.

            .site-header .wrap {
            justify-content: space-between;

          • Try this:

            Set a width of 20% to .header-widget-area.

            Then for .header-widget-area .simple-social-icons, set float to right.

            You may need to adjust these for smaller widths using media queries.

          • It worked. Thanks for your help Sridhar ! I’ve added a few lines to the media queries you provided to re-centre the social icons at smaller resolutions.

            @media only screen and (max-width: 1509px)

            .site-header .wrap {
            flex-direction: column;
            }

            .header-widget-area {
            margin: 10px 0 20px 0;
            width: 100%;
            }

            .header-widget-area .simple-social-icons {
            float: none;

            }

    • >