Pulling up hero image (block element) makes navigation menu disappear

Hi Marc,

You can try adding my-page-hero to the class list of the Container block as such: https://share.getcloudapp.com/JruoDo21

Then, here’s a custom CSS code you may try adding in Appearance > Customize > Additional CSS:

.gb-container.my-page-hero {
    min-height: calc(100vh - 110px);
}

Hope this helps! Kindly let us know how it goes.

Thanks for the quick reply, seems to do the job! Fab! :-)

However, I removed vertical height (vh=100) from the container's settings (to replace it with your css), but now the inner container moves all the way up to the top. Any idea how to get it down again, 25px padding from the bottom?

I've set padding of the top container to 25px and that did the trick before. However, now it moved up, and I'm not sure what's the best/prefered way to move it down again...

I see. One thing you could do is to add my-inner-container to the Container Block within the parent Container Block.

Then, add this CSS:

.gb-container.my-inner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Modify top: 50%; to your preferred value to move it vertically.

Kindly let us know how it goes.

Hi Fernando, thanks for the quick reply again.

Before trying your solution, can you please take a moment and look at this? In the meantime have been trying a bit, and set the minimal height of the hero/outer container again to vh = 100 (through settings, not css). And still have your css in use for calculating the minimal height (calc(100vh - 110px)).

This somewhat strange experiment (set vh to 100 through settings, and calculate it with css) seems to solve my issue.

But I'm not sure how this works, if it will always work, an if it's good practice at all?

You can see it in action right now at https://www.matjoo-digitaallab-kunstgalerie.nl/

min-height(100vh - 110px) should be overriding the 100vh set in the Block Settings, so setting that there shouldn’t be necessary.

Can you try removing it again, and I’ll check something?

Kindly let us know once you’ve removed it.

Yep, removed it again; so the only thing I just changed was removing the vh = 100 in hero top container settings.

Thank you.

Just realized that the Vertical Alignment only works with a min-height set.

You can leave the min-height to 100vh if you want to set the vertical alignment to bottom.

That would be alright.

The alternative would be to use custom CSS.

Hope this clarifies!

Allright, so defining min height to 100vh through settings, and then 'override' these by css (like yours above) is fine/alright?

Thanks a ton for the quick replies, code/solution, time and thinking; you guys just rock!

Cheers,
Marc

Yes, that would be fine. You’re welcome Marc! Cheers!

Perfect, thank you!