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