WP SITES

Log in

Add Header Right Widget For Simple Social Icons In Infinity Pro

—

by

Brad Dalton

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.

Simple Social Icons Header Widget Infinity Pro

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 :

  1. # Modify the PHP code in the functions.php file according to the screenshot for step 1 located inside the download folder.

    2.  

    Step 1

  2. # Copy & paste the CSS from the style.css file to the end of your Infinity Pro themes style sheet and clear caching.

    3.  
    Step 2

You can also rename the header menu to after header menu if you like on line 41 of config > theme-supports.php like this :

Primary Menu

Download Folder

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;
}

Comments

4 responses to “Add Header Right Widget For Simple Social Icons In Infinity Pro”

  1. Brodi Zimmer Avatar
    Brodi Zimmer

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Brodi Zimmer Avatar
        Brodi Zimmer

        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

        1. Brad Dalton Avatar
          Brad Dalton

          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

          [code]
          .header-widget-area {
          grid-area: widget;
          justify-self: end;
          padding-right: 50px;
          }
          [/code]

          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

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.