Before Header Utility Bar In Monochrome Pro

This tutorial adds a before header widget area you can use to add your phone number and social icons to like this :

Demo Video

Shows a new custom widget area added before the header in the Monochrome Pro child theme by StudioPress. The widget area contains 1 custom HTML widget with text for a phone number and the Simple Social Icons widget. Both are centred on smaller screens and displayed to the right on desktops.

Tested using Monochrome Pro however may work in other Genesis child themes without modification unless you change the size of the text or size of the social icons.

Installation Steps

There’s 2 steps :

1. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your Monochrome Pro themes functions file.

 


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

 

You can then add the HTML to a custom HTML widget and drag in the Simple Social Icons widget using these widget settings :

Demo HTML

This is the HTML used in the demo added to the custom HTML widget in the Before Header widget area.

Download Folder