Defining Header Image Height

Hey @businessbuilder,

thank you for choosing Bento!

The extended header feature is indeed structured around the page title, because it is in essence a fancy way of presenting one. Its height is therefore also dependent on the number of lines in the title – if there was a separate height setting for the header, there would inevitably be cases where the title overflows the header image, given the vast number of screen size and aspect ratio options on the modern web.

What you can do instead is use the SiteOrigin Hero widget from the Content Builder interface – you don’t need a title inside one; you can also make the containing row stretch the entire screen width by using the “Row Layout” drop-down in the “Layout” tab of the right panel in the row options pop-up window.

Sincerely,
Andrii / Satori Studio

Thank you Andrii / Satori Studio,

Your explanation of the structure of the extended header makes sense.

I did as you suggested and removed the header image and used a SiteOrigin Hero widget. I am now encountering two other glitches.

1) Between my logo and menu and the new image is a huge white space. How do I get rid of that so my photo bumps up right under the menu header?

2) My photo is now much skinnier that the width of the page. How do I get it to go the full width?

Your assistance is appreciated.
–K

Hey K,

I’ll go over the questions in the same order:

1. Please try the following: when in edit mode for that page, hover over the little wrench icon in the top right corner of the row which contains the Hero widget; click on the “Edit Row” in the drop-down that appears. In the ensuing settings overlay, expand the “Layout” tab on the right and inside it, change the value of the “Row layout” drop-down to “Full width stretched”.

2. The above manipulation will also make the image stretch the entire width of the page; just make sure you’ve added the picture as the frame background, not inside the content of the frame via the “Add Media” button ??

Sincerely,
Andrii / Satori Studio

Hello Andrii / Satori Studio,

The first trick worked. Changing the “Row Layout” to “Full width stretch” makes a nice difference. I’ll remember that as I am working on the rest of my website, so that I can control the visual impact of each row.

But I’m still having difficulty with the picture. I had been putting it inside the content of the frame using the “Add Media” button. So I went into that and deleted the picture.

Then I went into the Background Section and uploaded my background image. I realized I could control the height of the picture by changing the number in the “Height” box. That worked well.

My difficulty is that I still have a white space between the Menu Bar at the top and the photo from my Hero Widget.

For the row itself, I have zeros (0) in all the spaces for the padding.

In the Hero Widget, on the Left, under Layout, I have zeros in all the spaces for padding.

In the content portion of the Widget the Background Image type is Cover.

Under Design and Layout, I have the Height defined as 500px, and I have zeros (0) for Top and Bottom Padding, for Extra Top Padding, and for Side Padding. The Heading Size and Text Size are zero, but that shouldn’t matter because there is no text.

Actually —- I think this extra space is something else and not from my Widget. Because, when I move my rows around and put different Widgets up at the top, there is still a huge gap between my Menu and the first Widget.

I’ve looked at the Appearances, Customize, and I don’t see anything else that can define a height, or spacing or anything on my regular appearance for the whole site.

(As an aside… I thought at one point earlier last week I was able to define the height, or at least the padding for the Logo/Menu area, but now I don’t see where I did that)

My main concern is the white space. If you want to take a look to see what I mean about the huge whitespace, here is my temporary URL while I’m working on this…. https://217.10d.myftpupload.com/

Thank you for any assistance you can offer.

— K

Hey K,

in order for the gap between the header and the image disappear, please try un-ticking the “Activate Extended Header” checkbox in the “Page Header Settings” section while in the editor mode for that page ??

Sincerely,
Andrii / Satori Studio

Hi Andrii,

That worked! I un-ticked the “Activate Extended Header” and my whitespace disappeared!

I added some blank additional pages, verified that the box was un-ticked, and checked how they looked on a laptop, tablet, and phone. All looked good.

Because of going through this with you, I’ve learned the Bento and Page Builder are powerful tools, and there are lots of these nuances available to let me end up with a display that will best show off my website and ideas.

I’m sure the forum – previous questions from others – will be useful for me in continuing to create my site. If I need specific help, I’ll post another question thread.

Thank you so much for your patience in assisting me with this.

— K

glad to hear it’s been resolved! Should you face any difficulties with Bento, don’t hesitate to contact me.

Best,
Andrii / Satori Studio