Create a bar above the header in Genesis

If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

Some times a design requires a bar above the header.

This could be for multiple purposes such as

• a telephone number
• a mini menu
• social icons
• search

or other things as required.

To make sure it is flexible, regarding content, then it is best to define it with widget areas. In this case I have defined it with left and right areas

Step 1

Set up the widget areas using standard Genesis calls in your functions.php

genesis_register_sidebar( array(
'id' => 'top-bar-left',
'name' => __( 'Top Bar Left', 'theme-prefix' ),
'description' => __( 'This is the left top bar above the header.', 'theme-prefix' ),
) );

genesis_register_sidebar( array(
'id' => 'top-bar-right',
'name' => __( 'Top Bar Right', 'theme-prefix' ),
'description' => __( 'This is the right top bar above the header.', 'theme-prefix' ),
) );

 Step 2

We no need to place the top bar into the site. This can be done across site (as per my example) or can be done conditionally, e.g. front page (using conditional tags http://codex.wordpress.org/Conditional_Tags)  or in specific  templates rather than functions.php.

In functions.php we hook the two widget areas to genesis_before_header with some markup for styling

add_action( 'genesis_before_header', 'top_bar' );
//* Add top bar above header.

function top_bar() {

echo '<div class="top-bar"><div class="wrap">';
//* wrap is used to keep the widgets from going to the full outer edges of the viewport
genesis_widget_area( 'top-bar-left', array(
'before' => '<div class="top-bar-left">',
'after' => '</div>',
) );
genesis_widget_area( 'top-bar-right', array(
'before' => '<div class="top-bar-right">',
'after' => '</div>',
) );
echo '</div></div>';

}

 Step 3

Now we need to do a little bit of styling. In this case I have just a simple black & white, but of course this is up to you.

/* top Bar
--------------------------------------------- */

.top-bar {
background-color: #999;
color: #fff;
font-size: 12px;
padding: 10px 0;
overflow: hidden;
}

.top-bar a {
color: #fff;
}

.top-bar a:hover {
text-decoration: none;
color: #ebebeb;
}

.top-bar-left,
.top-bar-right {
width: 50%;
}

.top-bar-left p,
.top-bar-right p {
margin-bottom: 0;
}

.top-bar-left {
float: left;
}

.top-bar-right {
float: right;
text-align: right;
}

.top-bar input[type="search"] {
background: inherit;
padding: 10px 0 0;
}

And if you like with a bit of css you can make that header bar fixed.  You may have to apply a z-index to make sure it is always at the top.  And some padding to your body to make sure it compensates for the space.

e.g.

body {padding-top: 62px;}
.top-bar {
background-color: #000;
color: #fff;
font-size: 12px;
padding: 10px 0;
position: fixed;
z-index: 99;
width:100%;
top:0;
left: 0;
overflow:hidden;
height: 42px;
}