Mobile Navigation Overlap

Site URL: https://grey-cranberry-c4ar.squarespace.com/

A friend of mine just went to view my site to give it a once-over before I make my final changes and make it live. My friend noticed that while using a mobile device to view the site, my second layer of navigation has some text overlapping issues. (My primary navigation is fine, but when I click on one of the navigation options and see the secondary navigation (what would be the drop down menus on desktop) my text keeps overlapping.) I have tried viewing it on different devices, different OS and browsers. They all show the same issue. I have altered my spacing as wide as it can go and it's still having issues.

Help? I have no idea how to fix this.

Site password is: kiwi22

Adjust Navigation Items Line height.

If you can't adjust in Site Styles, add this to Home > Design > Custom CSS

.container.header-menu-nav-item a {
    line-height: 30px;
}

Ha HA! I found the right place to adjust the line height setting for the menu! I found it within Design>Fonts and then by clicking the hamburger menu icon (while in mobile preview) which brought up the option to customize the font for just the mobile menu.

Thanks Tuanphan for helping me figure out where to look!