Mobile Menu Overlay Padding Issue

Site URL: https://fox-scarlet-xnc8.squarespace.com/

This might be hard to explain but when I am viewing the site on my phone, the menu overlay is aligned way too high on the screen and will not allow the viewer to click "Home, Shop, or Blog". I've included an image below showing how it looks.

When I am editing the site on my desktop however, it appears fine. Also, an image of what it should look like.

Scratching my head a bit...

It looks like sub nav appears on overlay, make menu height is too long. How about remove subnav on mobile?

That might work. @tuanphan, let me ask this. What if I wanted to remove the primary navigation and replace it with the secondary navigation that is currently below the search bar? Would that be possible

On 10/18/2022 at 12:25 AM, Travis_Ampersand said:

That might work. @tuanphan, let me ask this. What if I wanted to remove the primary navigation and replace it with the secondary navigation that is currently below the search bar? Would that be possible

Yes. You can try adding this to Design > Custom CSS

.header-menu-nav-folder[data-folder="root"]>div>div:nth-child(-n+7) {
    display: none;
}