Issue with mobile nav not appearing on top of content

I’m having issues getting a mobile nav (sliding from the top down) to appear on top of content that appears below the section that it’s nested into. This section happens to be a Background video section at the top of our home page.

Read only link: https://preview.webflow.com/preview/seed-01?preview=e1ca935456d06ce248c1319ccdd9bbfd

Public link: https://www.seedtoken.io/

The obvious solution would be to set the Overflow: Visible for the entire Background Video section that my nav sits inside of, but this is creating a layout issue on mobile phones (iPhone tested) whereby the Background Video section then obscures the next section of the site in z-space. This is not immediately apparent in the webflow interface preview mode (it works and looks fine) but is clearly not working when I test it in the real world.

Thanks for any thoughts/feedback!

Steve


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

Thank you so much for reaching out @Steve_deBrun!

There are a few potential solutions:

  1. Move your navbar outside of your Background video section (maybe within a parent section that holds both the navbar and the background video)

  2. You could set your nav menu to a max-height of say 200px and set it to overflow: scroll on mobile:

I hope that this is helpful :man_bowing: please let me know if you have any additional questions!

Thanks @Waldo - super helpful. Your suggestion number 2 (set max-height and set to overflow: scroll) is a solution that is not ideal, but at least people can access all of the navigation.

I would prefer for it to simply slide over the content, as you suggest in #1. However, by creating a parent section and putting the navigation outside of the Background Video section, it’s now stacking above the Background Video in a white rectangle (I’m sure the nav is in there but it’s appearing white on white so I cannot see it). What I really want is for the Background video to fill to the top of the screen (and width of the viewport), and for the navigation to sit flush to the top of the screen on top of the Background video. What am I missing here?

Have you tried changing the z-index value?

Hi @QA_Brandon - yes, that was the first thing I tried. I think by default webflow sets navbars to a z-index value of 1000, which is what mine was set at when I checked.

@Steve_deBrun you could change your margin to a negative margin so it will sit on top of the video.

I cannot see this as your Shared Link only shows a static page.