Sample Theme Left Header Widet

[kgshultz]

Hi,

I'm trying to add a left header widget area into the sample theme. I want the left widget to be floated left, the logo to be in the center, and the right widget to be floated right. Then, on a smaller screen, I'd like the logo to stay at the top and the two widget areas to go below the logo.

I've registered the left widget area, but I don't know how to make it appear to the left of the site title/logo. Right now it's showing up as Title/logo -> Left Widget -> Right Widget instead of Left Widget -> Title/logo -> Right Widget.

Here is the code I used to register the left header widget area:

genesis_register_sidebar( array(
    'id'              		=> 'header-left',
    'name'         	 	=> __( 'Header Left', 'wpsitesdotnet' ),
    'description'  	=> __( 'Header left widget area', 'wpsitesdotnet' ),
) );

add_action( 'genesis_header', 'left_header_widget', 11 );
	function left_header_widget() {
	if (is_active_sidebar( 'header-left' ) ) {
 	genesis_widget_area( 'header-left', array(
       'before' => '<div class="header-left widget-area">',
       'after'	 => '</div>',
		) ); 

  }

}

Any help would be greatly appreciated.

http://fp.kgshultz.com

[Genesis Developer]

replace

add_action( 'genesis_header', 'left_header_widget', 11 );

by

add_action( 'genesis_header', 'left_header_widget', 6 );

---

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

[Genesis Developer]

replace current CSS by

(line no 888)

.header-image .site-header .wrap {
    background: url("images/logo.png") no-repeat scroll center center;
    padding: 0;
}

---

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

[kgshultz]

Thanks so much!

I do have one new question now. The widgets are not horizontally lined up with each other. How would I go about doing that? The left one is all the way at the top, lined up with the top of the logo, and the right one is centered vertically on the logo. I would prefer if they were both centered vertically on the logo.

Thanks again!

[Genesis Developer]

Replace current CSS by my code

line no 827

.site-header .wrap {
    display: table;
    padding: 40px 0;
    padding: 4rem 0;
    width: 100%;
}

line no 835

.title-area {
    display: table-cell;
    font-family: Lato,sans-serif;
    font-weight: 700;
    margin: 25px 0;
    padding: 16px 0;
    padding: 1.6rem 0;
    width: 52%;
}

line no 905

.site-header .widget-area {
    display: table-cell;
    float: none;
    text-align: right;
    vertical-align: middle;
    width: 23%;
}

line no 922

.site-header .header-left {
    display: table-cell;
    overflow: hidden;
    text-align: left;
    vertical-align: middle;
    width: 22%;
}

---

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

[kgshultz]

Will making them display as a table mean that they won't rearrange when looking at it on a smaller screen? I want the widgets to be below the logo when looking at it on a phone.

[Author]

Posts