Header Nav menu (Nestable) overlaps on Hero and pushes other elements down

[Kakemph_Apoc]

Hi, there,

Coming from Elementor, I’m building my first website with Bricks.

Problem: the Nav menu overlaps with my hero (see the face of the top player being covered by the menu in the screenshot):

I would like the hero to start below the nav menu ! The menu also seems to push down the post title.

In my case, the post title should be on the bottom of the background image and there should be no black bar - see same screenshot above.

Here is the website if it helps:

SCHUBERT – BOCCHERINI – BARBER - APAS

Maybe it does have something to do with the hero background keeping a constant aspect ratio? (3:2 aspect ratio by having padding-top: 66.66%, which I’d like to keep!)

I would be grateful for any solutions or ideas!
Cheers
Johannes

[timmse]

Hi,
Enable the “sticky on scroll” toggle.

Best regards,
timmse

[Kakemph_Apoc]

Hello timmse,

Thank you (again)! Unfortunately, this does not solve my problem:

The header is still on top of the hero and I still have an unwanted black bar at the bottom of the hero.

And I didn’t want a sticky header anyway

Cheers!
Johannes

[Kakemph_Apoc]

I found a solution! In the hero CSS, add the following:

%root% {
background-attachment: local!important;
}

I don’t really know why “local” is not available from the existing background-attachement slider:

But adding it by hand fixes the problem
Have a great day!

[timmse]

Ah, I see. That’s actually not needed if you set the background-image size to cover instead of contain.

This way, it takes up the available space, filling the “black gap” at the bottom.