[Resolved] Layout – Header Widget Alignment with Header Image

[Bonnie]

When I use the Widget:Header, I find that the items push the Header Logo/Image down and visually creates a huge space above it.

I’m not sure how to adjust the layout, so that they are aligned. (e.g. Widget:Header is next to Header Logo (vertically aligned at the top), instead of being above it.)

[Tom]

Hi Bonnie,

This can happen if you’re using a full width header.

Can you link me to the website so I can take a look and provide a solution?

Thanks!
Tom

[Bonnie]

I just started to set up this website.

As you will see, the logo image does not take up the entire width or height. However, there is a lot of wasted space because it looks like the Widget:Header is in a separate row above the logo/image. Anytime I add in another item within the Widget:Header, the logo gets pushed down further.

Ideally, I want the items within the Widget:Header to appear next to the logo, so I can save on space and not require visitors to scroll down so much.

[Tom]

Hi Bonnie,

It’s hard for me to tell without a link to the website, or maybe a screenshot?

Let me know,
Tom

[Bonnie]

Sorry but I thought the website link was included in my post. I entered it in the “Website” field on this form.

Try again. http://www.cathedraltownhealth.com

[Tom]

Hi Bonnie,

Looks like the theme is trying to display the tagline, which isn’t there.

Try going to Customize > Header > Hide site tagline and see if that fixes it.

Let me know,
Tom

[Bonnie]

🙂 🙂 🙂

Worked!

Thanks.

[Scarlet]

I’m having the same issue. I have a full width header and every time I try to add anything in the header, my header image gets pushed down. I tried adding the simple social icon widget to the header and my header image got pushed down and the facebook icon was in one place and the title for the simple social icon widget was in another place. I’d love to give you the website but I’m working from Instant-WP and not my real website. Is there any way to show you my issue?

[Tom]

If you have a full width header, you will need to position your header widget on top of it.

Something like this should do it:

.inside-header {
      position: relative;
}

.header-widget {
      position: absolute;
      top: 20px;
      right: 20px;
}

[Scarlet]

That didn’t work. Here’s a YouTube video I made to show you what’s happening, even though I’m sure you understand.

When I added the code you gave me, it pushed my image down further.

[Tom]

Ah, it doesn’t look like you’re using GeneratePress which is why the code above doesn’t work.

You’ll have to ask the Genesis people how to place their header widget on top of your image, as I’m not familiar with their code all that much.

Another alternative would be to remove all of the empty space in your header and only include the text – but you may have a reason for making the image full width.

[Scarlet]

I appreciate you taking the time out to help me. Thank you.

[Tom]

No worries – let me know if you need anything 🙂

[Author]

Posts