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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

Grid Columns Monochrome Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems