Element displaying when it should be hidden behind div(position:absolute) with solid background color

Hi guys, hoping to get some additional eyes on this for review.

I’ve built a home page that features 2 distinct layouts. Each is housed in its own div; the views can be toggled using a show/hide interaction with a text link as the trigger. I am using a solid background on the div that is lowest in my naviagtion (the initial state in the show/hide).

Problem:
Everything is hidden as it should be on the secondary page view (upmost div in nav) – except the main navigation. When I switch the hierarchy in the nav the same problem persists, so the problem should be apparent in the HoverHeader or GridHeader formatting.

To clarify, this is not an issue with the interaction, just the general layout and design – something simple I am failing to identify.

Thank you in advance for your help!

https://preview.webflow.com/preview/josephs-first-project-a4ae3e?utm_medium=preview_link&utm_source=designer&utm_content=josephs-first-project-a4ae3e&preview=0a6e82f44c8efefbcc079b4df5f85b04&pageId=5d0bf14695ca9202d046d08e&mode=preview

It looks ok to me. I’d just make sure your nav is inside the div with your content instead of in the body of the page. That should fix it. But it looks fine to me.

1 Like