Infinity Pro Responsive Title Menu Social Widget in Site Header

This tutorial contains the code which enables you to display your site title, nav menu and the simple social icons widget inline on desktops and responsive on iPads and iPhones exactly like you see in the video demonstration. Tested using the Infinity Pro child theme by StudioPress.

Demo Video 1

Here’s how the site title, nav menu and social icons behave on smaller screens when using a video as the background to the front page 1 widget area:

Demo Video 2

And here’s how the 3 header elements display inline on desktop computers and responsive on smaller screens when using a image as the background to the front page 1 widget area:

Installation Instructions

There’s 2 simple steps:

1. Follow this Infinity Pro tutorial to add the Simple Social Icons widget to the header right widget area.
2. Copy & paste CSS to the end of the Infinity Pro child themes style.css file.

Clear any server/browser/plugin caching of needed.

Here’s the CSS for logged in members: