Add Social Icons Before Header Right Widget Nav Menu

This tutorial provides 2 solutions which enable you to add the Social Icons widget perfectly vertically aligned centre before the navigation widget in the header right widget area like this :

On mobiles it centre’s each widget under the site title like this :

Tested using the Parallax Pro child theme by StudioPress. May need modification for use in other Genesis child themes.

Watch Demo Video #

Shows the Simple Social Icons vertically aligned with the WordPress navigation widget in the Header Right widget area of the Parallax Pro child theme. Shows the site header, social icons and nav menu centered on smaller screens.

Installation #

Copy & paste the CSS from either of the files in the download folder named solution-1.css or solution-2.css and paste at the end of the Parallax Pro themes style.css file. Clear caching.

This CSS only works with the following widget configuration in the Header Right widget area of Parallax Pro :

Also requires the icon size set in the Simple Social Icons widget settings is 30px. otherwise, you will need to change the value for the margins.

Related Tutorials

Join 5000+ Followers

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