Streaming live at 10am (PST)

Help with Mobile Menu Z-Index and Disabling Body Scroll

Hey everyone!

On my mobile nav menu, I have a 1px interior shadow which acts as a bottom border for my menu. I am using the standard Webflow Navbar with dropdown for mobile. When I open the nav menu, the menu slides down from the top like normal, but the menu is on top of this 1px shadow/border. I have played with the Z-indexes of all elements, but I can’t seem to get it right. Is there anyone that has a suggestion on how to layer this properly so that when my mobile nav menu is opening up (sliding down), the 1px shadow/border is always visible. I know it’s a small thing, but I’d really like to get it fixed if possible :slight_smile: You can see what I am referring to in the video below and my share link below.

My other issue is disabling body scroll when the mobile nav menu is open. There are quite a few forum posts on this topic, this forum post answered by @sabanna being the most popular. Most of the people on the thread were able to get the solution to work, but I have not been successful. The main reason I want to disable scroll is because I have a page scroll interaction where the menu bar moves off the screen when they scroll down and it moves back on the screen when they scroll up. When the mobile nav menu is open, I don’t want the user to scroll and the menu bar goes away. I do not currently have any of the scripts from the above-mentioned forum post on the site. If anyone has a suggestion on this one, I would appreciate it!

Here is my read-only link

Here is my live site

Hi
Why do you want this 1px to be in the front? whats the name of the div you are using for that 1px shadow?

For second issue - did you try Disable Scroll?

Screenshot 2020-03-27 13.48.20

@shokoaviv the div is called nav-symbol. and yep, I tried disabling scroll when fixed.

Hi
Can you elaborate?

the 1px in front is actually in deep back back of the page. You need to build it separately and/or using interaction

@shokoaviv The element with the bottom border should not be far down the page, it’s the 2nd element in the body as you can see below:

The reason I want the border to always show is because I think it looks better haha.

Hi

Yes, it looks good with 1px. I can see that you solve the issue, now you are still with the scrolling issue - interesting