Section below hero overlapping instead of stacking

Design help General
1

Hi,

I’m new to Webflow.
Hopefully a simple solve for experienced folks.
I’m stuck and would really appreciate some help here!

I created a Hero section with navbar and slider and I’d like to now add other sections below it.
But when I add a section below the Hero section it hides behind the Hero section instead of appearing right underneath it. It happens on all devices/screen widths.

I tried with sections, with Div Blocks instead of sections, with containers and nested elements, played with their widths and heights, positions… you name it – to no avail.
Interestingly enough, when I add a third section below that second one, it displays as desired underneath the two other sections.
I could just leave a ghost layer behind the hero but I’m sure there is a better/cleaner solution.

For better comprehension I organized the sections as follows:

  • Hero Section: with navbar and slider
  • Second Section: with full bleed image
  • Third Section: with red background only
    (link below)

Sorry about the design, it’s rather clunky - I still have a long way to go…

Thank you!

Here is the link to my read-only project:
Read-Only Preview

2

Keep the section relative & inside elements absolute. taht way to stick to the defined area

Any doubts, msg me your discord

3

Thank you, zerusty!

I’m afraid I wasn’t clear…
Looks like you stacked the sliders, not the sections.
I’d like to leave the Slider/Hero untouched but have the two Sections lined up/stacked vertically below it. Meaning, Slider/Hero first, below that Section 1 (green), and then Section 2 (red).
Like that:

  • Hero/Slider
  • Section 1: Green
  • Section 2: Red
    (Please click updated read-only link below and see the picture below as a visual reference of what I try to achieve)

[Right now Section 1 (green) is hidden behind the Hero/Slider and only Section 2 (red) shows below the Hero/Slider. Section 1 should show between Hero/Slider and Section 2.]

Thank you!
Click here for updated Read-Only

3Sections_stack
3Sections_stack500×969 78.6 KB

4

I may finally have figured it out myself.
I gave the Hero (as a whole section) 100 VH. That seems to do the trick.

Resolved read-only

Before I only had the slider height defined but not the Hero section itself. Therefore the sections below weren’t pushed down – only the second section (red) was pushed down by the defined height of the first (green) section – hence the first (green) section disappeared behind the Hero.

Embarrassing how one little thing like that threw me you off for hours! Yikes!

Thanks!

5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.