WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Add Header Right Widget For Simple Social Icons In Infinity Pro

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

Reader Interactions

Comments

  1. 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

Leave a Reply