• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

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

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

Simple Social Icons 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

CSS Grid Columns Monochrome Pro

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.