Full width image on interior pages?

Hi Wes,

I logged in to ask the same question that Tre asked (what are the odds?).

I’d like to add a full width banner (image & text) under the nav bar at the top of pages and posts.

Thanks!
Scott
https://scottsmoneymachines.com/

This is brilliant Wes! I’ve been playing around with it and there’s so much I can do!

There’s a few things I’m afraid to try because I don’t want to crash my site.

1) How do I reduce the huge space between the widget and the post title?
2) How can I make a similar widget for the home page?
3) How can I create two widgets so I can stack them with different color backgrounds? (this is the one I’m really afraid to play with).

Thanks Wes,
Scott

The extra space might be coming from the .site-inner on line 655 in your style.css –

.site-inner {
	background-color: #fff;
	clear: both;
	margin-top: 170px;
	position: relative;
	z-index: 9;
	-word-wrap: break-word;
}

So if you’re going to add that widget then I would adjust the margin-top for the .site-inner. You can either adjust the CSS directly in your style.css or you can add it to your Custom CSS section.

If you need two widgets with different colors back to back, then just duplicate all of the steps and rename the 2nd widget. You can rename it something different, or just add -2at the end. after-header-widget-2

Let me know if that helps.

And here’s the code from the functions file for both widgets:

add_action( 'genesis_after_header', 'after_header_widget', 11 );
/**
 * Hooks in after Header Widget Area.
 *
 */
function after_header_widget() {

	genesis_widget_area(
		'after-header-widget',
		array(
			'before' => '<div class="after-header-widget"><div class="wrap">',
			'after'  => '</div></div>',
		)
	);

}
genesis_register_sidebar( array(
	'id'          => 'after-header-widget',
	'name'        => __( 'After Header Post & Page 1', 'aspire' ),
	'description' => __( 'This is the After Header Widget 1.', 'aspire' ),
) );

add_action( 'genesis_after_header', 'after_header_widget_2', 11 );
/**
 * Hooks in after Header Widget Area.
 *
 */
function after_header_widget_2() {

	genesis_widget_area(
		'after-header-widget-2',
		array(
			'before' => '<div class="after-header-widget"><div class="wrap">',
			'after'  => '</div></div>',
		)
	);

}
genesis_register_sidebar( array(
	'id'          => 'after-header-widget-2',
	'name'        => __( 'After Header Post & Page 2', 'aspire' ),
	'description' => __( 'This is the After Header Widget 2.', 'aspire' ),
) );

It still does not work, but it reveals more of where the adjustment may need to be.

Adjusting the margin-top changes the margin (“the space”) from relative to the top of the page to relative to just under the after header widget. In other words, without the widget the relative position is above the header – it does not see the header – but when adding the widget it adds the space of the header and the widget. That’s why your test worked. We can fix this if we can somehow change the relative (default) position to below the header. On a side note, this explains another problem that I have experienced when trying to link to a position within a post (the top of my paragraph get’s cut off).

Noting that I want to use the widget sometimes (for say a promotion), the relative position needs to be consistent.

I set the margin-top to 10px. Here’s what it looks like with the widget (looks good):

Then I remove the widget, and this is what it looks like (top is cut off):

To add another twist to the mystery, when I add the second after header widget (still with the margin-top set to 10px), a space appears between the two widgets. You can see that here:

What are your thoughts?

Yes the space is mostly coming from that .site-inner div that I posted in my previous reply. If you want to reduce it then that’s one of the places you can start.

One of the reasons that space is there is to push the site content down some to prevent it from showing up to high or behind the header. The header area is an in a fixed position that doesn’t move, and when you do that, everything under that header has to have space added to compensate (this happens on any site/theme).

If you want to easily fix this, then I’d disable the Sticky header through CSS…especially if you’re going to have multiple widgets/content under the header. Otherwise it’s going to take some effort to create some custom CSS code to keep the sticky header while also adding in those multiple widgets right under it.

In order to do either of those it’s going to require some CSS.