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

Home Forums Support [Resolved] Pulling up hero image (block element) makes navigation menu disappear

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2265169
    Marc

    Hi there,

    I’ve created a hero image at my homepage, using the block element. The height of the 1st container in the block element is set to 100vh so it covers the whole page. However, since I have a navigation bar with a height of 110px the hero image gets pushed down by 110px. So I’d like to pull the block back up again with a negative top margin of 110px for the 1st container. But this makes the navigation menu disappear behind the block/hero image.

    Here’s the page (right now without the negative top margin for the block’s 1st container, which means the hero image is pushed down 110px by the navigation bar): https://www.matjoo-digitaallab-kunstgalerie.nl/

    How can I make the hero image exactly the height of the viewport, taking into account the height of the navigation bar?

    Cheers,
    Marc

    #2265343
    Fernando
    Customer Support

    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.

    #2265397
    Marc

    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…

    #2265406
    Fernando
    Customer Support

    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.

    #2265421
    Marc

    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/

    #2265437
    Fernando
    Customer Support

    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.

    #2265457
    Marc

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

    #2265463
    Fernando
    Customer Support

    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!

    #2265467
    Marc

    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

    #2265469
    Fernando
    Customer Support

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

    #2265471
    Marc

    Perfect, thank you!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.