I’ve been working on trying to get my menu nav in the mobile view scrollable but all that scrolls is the body (background screen). Anytime I try to change the overflow settings to scroll, something else breaks entirely and I’ve finally gotten the menu to a spot where it looks fine on the desktop and mobile (staying centered that is). I would greatly appreciate it if someone could help me figure out why the menu won’t scroll and why something else breaks if I try to change it.
Yep it’s easy to add styles to the nav that will conflict with e.g. the dropdown menu scripts. I’m seeing that in your nav. Tbh I can’t even create a situation where there is anything to scroll because the menus cannot expand or are off-screen, so I’d fix that first.
A few tips, I’ll use the Platform dropdown as a reference;
Avoid adding layout or positioning styles you don’t need, they’ll complete with your scripts and cause problems later
Be careful about normal and Open states, they can be styled differently but it may not be immediately visible in the designer.
If you’re adjusting the position of a dropdown menu, make certain to correct it on other breakpoints. Right now desktop has a -197% left on your dropdown menu. On tablet, that pushes it way off screen where it cannot be seen.
What you want to do is clean up those extra layout and positioning styles by undoing them so they are not blue ( which is an override state ).
Then turn your mega-menus into mobile menus by re-flowing the columns vertically.
Another top- the reason most mega menus go all the way to the edge of the window is that it’s easier to mobilize them. Rather than using a negative left position adjustment, you can design them so they are sized relative to the window or the nav bar, not the dropdown trigger. That way on a mobile breakpoint, all you’re changing is padding and flow, you don’t need to “fix” anything on positioning.
Your mobile nav menu likely isn’t scrolling because its parent container is either fixed height, positioned incorrectly, or has conflicting overflow settings. Ensure the menu wrapper has overflow: auto or scroll while keeping the body’s overflow as hidden to prevent background scrolling. Also, check that the menu has a max-height with vh units (e.g., max-height: 80vh) to allow scrolling within the viewport. If changing overflow breaks the layout, inspect flex/grid settings or positioning. Try these fixes and republish—if you need further help, feel free to contact me.
Thank you for the tips! The reason I have the -197% on the left is because the dropdown container would get cut off of the screen when it was added and I didn’t have anything selected on the padding, margins, etc. I used that setting to center it but I think this would be fixable if I take your suggestion on making it relative to the window or nav bar. Right now it’s relative to the dropdown toggle. I’ll also look into re-flowing the columns vertically as I get this image on the tablet once removing the -197% and adding 90vw for width (tried that to fit the screen)