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 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!