Dropdown navigation appearing behind hero header and button

Hey all,

(First post! Yay)

Having some responsive issues.

  1. In tablet/mobile viewport the nav menu is appearing behind my hero header and button. I thought it might have been related to my z-index. So both the header and button are set to 1. What should my navigation menu be set to? I’ve tried higher values but none seem to work.

  2. Some of the pages (for instance: Timeline > Today) have a white margin down the right hand side. I’ve checked my CSS for overflow : hidden issues but can’t see anything. Perhaps it’s something else that has triggered this layout?

Any help would be greatly appreciated!
Stay safe, stay inside, keep Webflow-ing.

Dan

https://preview.webflow.com/preview/making-space?utm_medium=preview_link&utm_source=designer&utm_content=making-space&preview=ebf1b2ed94966417cf88abcf6dd50727&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @DAB, have you fixed both issues or am I not seeing it on my end?

Hey @dennyhartanto

No sadly not, still having issues my end.

Would love to help, could you to screenshot/record it happening? Maybe I am not looking at the right things.

@dennyhartanto Good idea! See below:

See attached screen shot of issue 1:
Floating Hero Header and Button

And also a screen shot of issue 2:

Alright got it.

Issue no. 1:

  1. Add a position: relative; z-index: 999 to the parent Navbar not the Nav menu.
  2. Set the overflow to visible for Navbar as well.

Issue no. 2:
There are contents overflowing from your content/timeline section, hence the white gap.
Add overflow hidden for these content sections and that should fix it.

Hey @dennyhartanto

Thank you, that sorts out both issues perfectly!
I think I needed to walk away for a breather before tackling it, it all suddenly makes so much sense!

Cheers, have a great weekend.

1 Like

Awesome! Just need another pair of eyes sometimes.

Cheers! Stay safe!

Hi. I’m having similar trouble and the solution mentioned above is not working for me. In mobile breakpoint alone, the relative elements in my page header is appearing above the mobile nav menu.

Here is a read-only link of the page if it helps: Website Link

Could you help, please?