How to display menu on top of image

Hey @hhdenouden,

thank you for choosing Bento!

If I understood the setup correctly, the extended page header might be the setting you need – please take a look at this part of the theme manual. In short, if you activate the “Extended page header” option and add a featured image to the page, the header will contain a full-width image, and then a logo with menu on top of it. Let me know in case I misunderstood the situation or the feature doesn’t work as expected!

[ Signature moderated ]

• This reply was modified 7 years, 1 month ago by Jan Dembowski.

Hi Andrii,

Thanks for your reply. This is indeed approximately what I need. Some follow-up questions though:

– I only need 1 action button. If I set that it is positioned quite far to the left. How can I center this?
– How do I set a transparent action button, like you have on the theme front page?
– I would like the action button to link to a location all the way at the end of the page. I have tried that by setting …./#name_of_row , but this doesn’t seem to work. Do you have a suggestion for this?
– I have 3 pages, for which I would like to have the same setup for all, but in all the action button should link to a place lower on that specific page. Is my assumption that with the current setup this is not possible correct? Because you only set the call to action button for the static front page.

Thanks for your help again!

Hanneke

Hey Hanneke,

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

1. Please try setting the “Title position” drop-down in the “General settings” section while in the page editor mode to “Centered” – this will also center the button(s).

2. The secondary action button is transparent with a coloured border – you can set the secondary button using the “Secondary call-to-action button text” option in the “Static Front Page” tab of the Cursomizer.

3. At the moment the theme supports two types of links for CTA buttons – either a direct URL or a same-page link which automatically scrolls the page to the end of the header; in case you need to bind the button with a specific section on your page, you can use hashed same-page links, or the type “https://example.com#section (more info e.g. here).

4. Currently the CTA buttons are only available for the front page in Bento, we’ve removed this feature from other pages because of www.remarpro.com reviewers’ requirements. What you can do instead is use the “SiteOrigin Hero” widget from the Content Builder, it allows placing buttons inside the header image/slider: while editing a specific frame inside the widget settings pop-up, expand the “Buttons” section and enter the needed parameters. Don’t forget that you’ll need to add a [buttons] shortcode into the content of the frame to insert these buttons.

[ Signature moderated ]

• This reply was modified 7 years, 1 month ago by Jan Dembowski.

Hi Andrii,

Thanks for the extensive reply. I have sorted most things out now, site almost ready for launch. I really like the theme, thanks for creating it!

Hanneke

Glad to hear, Hanneke! Should you have additional questions, don’t hesitate to contact me.

[ Signature moderated ]

• This reply was modified 7 years, 1 month ago by Jan Dembowski.

Hi, my question belongs to this thread so I’ll just add it here instead of starting anew one.

I am using Bento and want to eventually end up with a single-page layout. I am under MYPAGE/wp-admin/customize when I set my front page to A static page and set my page, I also set my Front page header here. For some reason I cannot make this transparent Menu overlay happen. Should I not set Front page header here and add a Page header while I am editing my page? It seems that the recommended checkbox method does not affect my Front page header image.

Thanks,
V

Hey @viragka,

you can set up the transparent header by using the “Transparent website header” checkbox in the “Page Header Settings” section of the edit mode for that particular page; please note that this feature is a static page setting so it will not manifest on archive pages, including the native WP blog posts page.

[ Signature moderated ]

• This reply was modified 7 years, 1 month ago by Jan Dembowski.

Hi, I set “Transparent website header” but the header keep going to be visible on white space on the top of my image.

Hey @eskolmoro,

please enter the editor mode for the front page and un-check the “Activate Extended Header” in the “Page Header Settings” box ?? the menu + logo are is indeed transparent, but it look white because the extended header image area (blank) is in the background.

[ Signature moderated ]

• This reply was modified 7 years, 1 month ago by Jan Dembowski.

Hi Andrii,

Thanks for the above, it helped me get most of what I wanted. Can you help me out with these last items:

– On the Bento Demo site, you have a title, subtitle and CTA button. How can I get the title and subtitle? I have a menu option ‘Home’ which is the title of my landing page. Please tell me it’s possible to set the text in the header somewhere other than in the page title… ??

– The CTA button doesn’t seem to respect the theme settings for button size and font. Is it possible to customize these?

– There is a lot of blank space underneath the header image. How can I get rid of this? The next row is a hero image.

– The featured image now scales with the browser window size, which is great. However: the CTA button overlaps the image when I get to Phone size. Is there any way to manipulate the image alignment?

Thanks in advance,
Jorg

Hey Jorg,

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

– The title for the full-width page header is sourced from the title of the respective page (in case there’s a problem with this option, please provide more details, we’ll think how to solve it ?? and the subtitle is the page’s excerpt (in case you don’t see the Excerpt box while in the page edit mode, open the “Screen Options” tab in the top right corner and tick the “Excerpt” item.

– All currently available CTA button settings are located in the “Static Front Page” tab of the “Appearance – Customize” admin section. In case you need more adjustments, you can use CSS, e.g.: .post-header-cta-primary { font-size: 16px !important; } or .post-header-cta-secondary { padding: 20px 15px !important; } in the “Additional CSS” tab of the Customizer.

– Please try setting the layout for the Hero Image’s parent row to “Full-width, stretched” in the right side of the options pop-up that appears when you click on the “Edit row” cog in the top right corner of the row.

– You can use some more custom CSS, e.g.: .post-header-cta { position: relative; top: 20px; }

[ Signature moderated ]

• This reply was modified 7 years, 1 month ago by Jan Dembowski.

Excellent help, thank you!

I had a question related to this topic as well.
Is it possible to have the header image or hero image be a carousel slideshow and have the Menu display over this? Any help or advice would be greatly appreciated.

Thanks!

Hey @nickja,

you can use the SiteOrigin Hero element of the Content Builder, like on this demo page – it allows adding several slides.

[ Signature moderated ]

• This reply was modified 7 years, 1 month ago by Jan Dembowski.