How Can I Put Content Above Header-Widget-Area?

[KenTheriot]

How can I put content (specifically looking to put a "utilities" menu for things like Log-In/Out and Site Search) above the dark rectangular strip on which is shown the title-area and Genesis nav menu (not sure what to call that header bar thingy)?

Here is an example of a site that has content above the nav bar. Though he has more information up there than just a menu. I'd also love to know how to do that though. Maybe they are the same solution?

I use Eleven40-Pro. My site is: http://www.homebrewaudio.com/

Thanks!

Ken

http://www.homebrewaudio.com/

[nutsandbolts]

This tutorial should help you: http://www.carriedils.com/widget-area-above-header-genesis/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[KenTheriot]

Thanks Andrea! I'm looking now. I love the graphic on the post:).

Ken

[KenTheriot]

I implemented the code in that tutorial. But when I put test text ("text") into the "Right Utility Bar," it sows up on the left side. Same with the Left Utility Bar (so that one works correctly). I don't suppose you know why that would be? Here are the two bits of code:

/** Register Utility Bar Widget Areas. */

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

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

Then

add_action( 'genesis_before_header', 'utility_bar' );
/**
* Add utility bar above header.
*
* @author Carrie Dils
* @copyright Copyright (c) 2013, Carrie Dils
* @license GPL-2.0+
*/
function utility_bar() {
echo '<div class="utility-bar"><div class="wrap">';
genesis_widget_area( 'utility-bar-left', array(
'before' => '<div class="utility-bar-left">',
'after' => '</div>',
) );
genesis_widget_area( 'utility-bar-right', array(
'before' => '<div class="utility-bar-right">',
'after' => '</div>',
) );
echo '</div></div>';
}

Thanks.

Ken

[nutsandbolts]

Did you put in CSS to float the divs to the left and right like Carrie mentions at the end of the tutorial?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[KenTheriot]

That was it, Andrea. Yes. Thanks!

Ken

[Author]

Posts