This tutorial shows you how to add the header right widget back in the header of Infinity Pro. In this example, we add the Simple Social Icons widget to the header right widget area, align the icons to the right and vertically centre the icons within the widget area.
Demo Video
Shows the header right widget area added back to the Infinity Pro child theme by StudioPress. Adds the the widget for the Simple Social Icons plugin in the header right widget area.
Tested using the Infinity Pro child theme by StudioPress.
Installation Steps
There’s 2 steps :
- # Modify the PHP code in the functions.php file according to the screenshot for step 1 located inside the download folder.
- # Copy & paste the CSS from the style.css file to the end of your Infinity Pro themes style sheet and clear caching.
You can also rename the header menu to after header menu if you like on line 41 of config > theme-supports.php like this :
Off Screen Menu
If using this, modify the CSS rule for desktops to this :
.header-widget-area {
grid-area: widget;
justify-self: end;
padding-right: 50px;
}
Thanks for these files. Two small problem here: 1. when I added the Header Right the icons where only blank circles and 2. the Header is now too big (height) and covers up half of my MENU titles.
Sorry, I am not a pro – need advice if it is included in my sub. Thanks,Brodi
Hi Brodi. What version of Infinity Pro are you running? Also, link to your site please, and, what size are you setting your icons in pixels in the widget settings?
I’ll get back to you within the next 24 hrs.
Brad,
Thank you. Infinity Pro for Genesis Framework Version 1.3.2
https://lowersusquehannariverkeeper.org
I see that the reason ditty ticker is below the header so it is what is cutting off my MENU titles – I will look into that.
But I still don’t see the actual social media icons, it is just blank circles. I turned it off for now. I took a screen shot of what it looked like – here:
https://drive.google.com/file/d/17N83BqZ03rClI-9ipQqktV3GAXOTqvmL/view?usp=sharing
Thanks,
Brodi
I re-tested the code based on the installation instructions in the tutorial and download folder. It works perfectly. Happy to send you a copy of the theme with the code installed. I made this new video today https://youtu.be/DVJV3E7Y3WI
If using the offscreen menu, you’ll need to add some padding to the
I suggest you re-install the CSS again from the download folder and clear all types of caching.
Troubleshooting icons not displaying https://github.com/studiopress/simple-social-icons/wiki/Troubleshooting-Tips