Overlaping Header, Body, and Nav bar

Read-Only:
https://preview.webflow.com/preview/austins-first-project-bd4a99?preview=d0329f90f4020db4ccf9bf7268f9ff3d

Here is a fun design challenge for everyone,

I am rebuilding a website to make it look like the original, but mobile responsive.

Here is what the original site looks like

Here is what my webflow version looks like:


https://preview.webflow.com/preview/austins-first-project-bd4a99?preview=d0329f90f4020db4ccf9bf7268f9ff3d

I could easily shift up the second section and set its z index higher to place the picture slightly over the header, but then when I open the dropdown menus from the navbar, they would fall behind the big picture in the middle of the page under the header/navigation section as shown here:

Somehow in the original building of this site, they managed to avoid this issue. As you can see, the body is over the header, and the nav dropdown items are above the body.


How can this be replicated in Webflow?


Current site that I am rebuilding to make mobile responsive:

Read-Only:
https://preview.webflow.com/preview/austins-first-project-bd4a99?preview=d0329f90f4020db4ccf9bf7268f9ff3d

Published link: