Section below hero overlapping instead of stacking


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

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

Any doubts, msg me your discord

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

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!


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