• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Social Icons To Infinity Pro Themes Nav Menu

This tutorial enables you to add social icons inline with the header menu in the Infinity Pro child theme by StudioPress.

Here’s the result:

You can see the icons added inline with the header menu and floated to the right in the above image.

The infinity Pro theme by StudioPress doesn’t include a header right widget area. The widget has been unregistered so you can’t add the simple social icons widget to the left or right of the header menu in this theme without adding the widget back.

Step 1 : On line 85 of the Infinity Pro child themes functions.php remove the following line of code.

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

Step 2 : Install & activate the Simple Social Icons plugin and drag the simple social icons widget into the header right widget area.

You’ll then need to position the icons inline with your the header menu. The CSS for this will vary depending on the size of your icons: In this example, the size has been set as 26px.

Step 3 : Here’s the CSS you can add to the end of the Infinity Pro child themes style.css file and modify.

.simple-social-icons {
    float: right;
    margin-top: 20px;
}

Adjust the value for the margin-top property in the above CSS rule to change the position of the icons inline with your header menu.

Assumes the use of the default location for the header menu.

Media Queries – Mobile Screens

Step 4 : You can use CSS wrapped in a media query to position the icons left, right or center on smaller screens. Here’s some sample CSS for Media Queries you can extend and add at the end of your style sheet:

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

/* Add Your CSS Rule(s) Here

}

Related Tutorials

  • Add Header Right Widget For Simple Social Icons In Infinity Pro
  • Replace Menu Item Text With Image
  • Add Social Icons After Header Right Widget Nav Menu
  • Add Social Icons Before Header Right Widget Nav Menu
  • Infinity Pro Responsive Title Menu Social Widget in Site Header

Infinity Pro Theme Simple Social Icons

Reader Interactions

Comments

  1. BeckyBruso says

    January 10, 2017 at 6:35 pm

    Hi Brad- Thanks ! This works great. One last thing on this. If I want to modify the order of the icons in the header, I see the plugin and where the array is constructed. is there a way to easily do this without modifying the plugin’s order directly?

    Thanks.
    Becky

    Log in to Reply
    • Brad Dalton says

      January 11, 2017 at 1:47 am

      Yes, there’s a filter you can use

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.