Top bar issues: transparency and height

Hey @verneadmin,

thank you for choosing Bento!

You can insert a full-width header image using the Extended Header theme feature (more information can be found in this section of the manual); header transparency can be set using the “Transparent Website Header” checkbox in the “Page Header Settings” section while in the page edit mode.

The height of the header is determined by the height of the logo image (plus 30px padding), so reducing the height of the logo will affect header height; there’s no control to change the padding at the moment, but you can alter it using some CSS (to be inserted into the “Additional CSS” tab of the “Appearance – Customizer” screen), e.g.:

.logo { padding: 10px 0 !important; }

Sincerely,
Andrii / Satori Studio

Thanks for your help.
I got the point for the header CSS customization and it seems to be working.
But I still can’t have my top menu background set as transparent even after having enabled the Extended Header, and set the transparency on… It actually makes the header below the menu transparent, but not the menu itself as it is on the Bento demo. And I can’t add an image as menu background as all pages have different images…
Basically I’d like to have the same top menu behavior than on your demo site : https://satoristudio.net/bento/

I can also give your in MP access to the site ??

Well, it seems I found the issue, I was not using the theme the right way. To make what I need, I finally set my image as the header background and now menu items display on top of the image with transparency and when scrolling down, the menu gets solid as expected! Now I need to understand how to customize the text and CTA in this section.
Any help ?

Sorry for your help so far, I think I solved my main issue. So I’ll close the ost and open another one if I still have a problem I can’t fix by myself.
And BTW your theme is really great guys, congratz !

Hey @verneadmin,

glad to hear the issue’s been resolved! Should you have additional questions, don’t hesitate to contact us.

Sincerely,
Andrii / Satori Studio

Verneadmin, i am also having the same issue with my website.
To theme Author: I just downloaded the bento theme and i would like to be able to modify the color of the menu text as it scrolls down from a white text transparent menu to a white dark font menu. The primary menu: text color is the only feature that i could figure out and I am able to change it to white (for the transparent menu) but where do I modify the font to dark as I scroll down?

Also, how can I add text to the main header as your demo site? The static front page under the customize menu lists where to add text and links to a button but not the title.

I am currently using visual composer to design the site, is it compatible with bento?

Thank you

Hey @sadminxp1,

there is currently no back-end setting for changing the header menu’s text color when scrolling down, but you can do this via code by adding this line to the “Additional CSS” tab of the “Appearance – Customiser” admin section:

.site-header.fixed-header .primary-menu > li > a { color: #333333; }

The text displayed in the header of the front page of the Bento demo is the title and the subtitle of the page, the first being the native WP title and the latter set by the “Excerpt” field while in the page edit mode (if you don’t see that field, please open the “Screen options” tab in the top right corner and tick the corresponding item). In order for the title and subtitle to display against an image background, you’ll need to activate the extended header on the particular page.

Sincerely,
Andrii / Satori Studio