Make existing widget area full-width above header

[hmistler]

Hi! I've read a lot of tutorials about how to make full-width widgets, but I'm having some trouble with doing this on my website. My issue is I bought a studiopress theme, Swank, which comes with a section called "Top Bar" already above the header. I've changed the background color of it to black, and I noticed that this Top Bar area is not full-width. I need it to be! I checked it's code in my functions.php file and here is what it looks like:

//* Add Top Bar Above Header
add_action( 'genesis_before_header', 'swank_top_bar' );
function swank_top_bar() {
 
	echo '<div class="top-bar"><div class="wrap">';
 
	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>';
 
}

The style.css is this:

.top-bar {
	background-color:#000;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	line-height: 1;
	padding-bottom: 10px;
	padding-top: 15px;
	text-transform: uppercase;
}

.top-bar a {
	color: #bbb;
	font-family: 'Old Standard TT', serif;
	font-size: 16px;
	font-style: italic;
	letter-spacing: 0;
	text-transform: lowercase;
}

What would be the best way to make this area full-width? When I check it in firebug, the HTML says it is within the "Wrap" div. I guess I need to get it out of the wrap? Any advice much appreciated! You can see what I'm talking about here:
http://www.haleymistler.com/blog/

http://www.haleymistler.com/blog/

[DTHkelly]

Have you tried the PDC forum (for this theme?)

Move top bar above the wrap?

http://www.carriedils.com/customize-genesis-move-header/
http://wpbeaches.com/adding-full-width-wrap-content-genesis-child-theme/

Another thought: What about the hook genesis_before
Is that outside the Swank boxed wrap?

http://genesistutorials.com/visual-hook-guide/

https://wordpress.org/plugins/genesis-visual-hook-guide/

[hmistler]

Thanks for the reply - I tried Carrie Dill's php code to move the header outside the wrap; it actually made my Top Bar segment move further down the page! Using the hook guide, I can see that genesis_before IS outside of the wrap (which in this theme is called "site-container"). I think I need to switch something in the PHP code to make it move the top bar, as the code Carrie wrote moves just the header and this is not part of the header. It is its own div ABOVE the header. Here is what Carrie wrote:

//* Reposition header outside main wrap
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ) ;

add_action( 'genesis_before', 'genesis_header_markup_open', 5 );
add_action( 'genesis_before', 'genesis_do_header' );
add_action( 'genesis_before', 'genesis_header_markup_close', 15 );

My thought is I need to switch 'header' to 'swank_top_bar' or something. OR change the PHP code from "genesis_before_header" to "genesis_before":

//* Add Top Bar Above Header
add_action( 'genesis_before', 'swank_top_bar' );
function swank_top_bar() {
 
	echo '<div class="top-bar"><div class="wrap">';
 
	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>';
 
}

Would ^that code work? I'm nervous to play around with the php too much.

[Genesis Developer]

Ok. I am trying to help. You do not need custom php code. Just modify the few CSS.

go to line 405 and replace the current code by

.site-container {
    background: #fff;
    margin: 0 auto;
}

go to line 2240 and replace the current code by

.top-bar .wrap {
    background: #000;
    padding-bottom: 10px;
    padding-top: 15px;
    width: 100%;
    z-index: 100;
}

Add this new code

.top-bar {
  position: fixed;
  width: 100%;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[hmistler]

That worked! Thank you!

[Author]

Posts