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
}
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
Yes, there’s a filter you can use