Scott Gilbert

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?

Ok Wes, here’s the results:

Still Same Issue With Space
Changing the margin-top in .site-inner did not have any affect. I tried small numbers, large numbers, clearing my cache, etc. I made the changes directly in the CSS.

The Two Back To Back Widgets Partly Work
The two widgets have a large space between them, leading me to believe that the (above) space issue is somehow related to the widget, not the page/post. Here’s an image:

Both widgets take on the same background color… the color of the first widget. You can see that in the image above. I’m not sure what I am doing wrong. Here’s the CSS code:

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

Hey Jonathan,

I’m not sure if I have your answer, but here’s what I’ve done that works. I use an image size of 1132 x 269 and made note of it for my future use. I’m not sure how I landed on those dimensions, but it seems to work everywhere.

I use Photoshop, so it’s easy (for me) to change the pixel dimensions of an image. Also, if do try this, then be sure to keep your image the same proportions. That means you can change your width to 1132 and the height will become 226. You can then increase the height of the canvas of your image to 269. The end result will be an image that is 1132 x 269 with the same proportions as your original (because we added space vertically). The Aspire theme uses a black header background, so make sure the additional space is transparent and save as a PNG.

I hope this helps you. This is what it looks like on my site: https://scottsmoneymachines.com/

Scott

Thanks Wes. I was unable to get the widget set up because I do not know what my widget area ID is. I am technical enough to add the code and figure out some things, but I’ve been struggling trying to figure out how to find or make a widget area ID.

I am not sure, but I am assuming the widget area ID is the name of the widget, which I expect would show up under “Appearance > Widgets” as an available widget once I create/define it.

Can you shed some light on this?

Thanks,
Scott

—- These are the instructions you sent me to —-

Example 2: add an extra widget area above the site header. Just replace before-header with your widget area ID.

<?php
// Paste the code BELOW this line into your child theme functions.

/**
* Add a widget area before the site header with Genesis
*
* @author Reasons to Use Genesis
* @link http://reasonstousegenesis.com/before-header/
*/
add_action( ‘genesis_before_header’, ‘rtug_before_header_widget_area’ );
function rtug_before_header_widget_area() {

genesis_widget_area( ‘before-header’ ); // replace before-header with your widget area ID

}