Crowded text on mobile menu

Site URL: https://www.footandanklesurgery.com.au

Is there a way to uncrowd this jumbled text on the site's mobile menus? It comes out fine on the desktop site but if I try it in mobile mode, the text is wrong. Please see images.

I'm using the multi-row header CSS (https://schwartz-edmisten.com/blog/multi-row-header-in-squarespace)

Also using 7.0 and impact template. I'm a novice at Squarespace so any help is much appreciated.

Add to Home > Design > Custom CSS

.Mobile-overlay-nav--secondary a.Mobile-overlay-nav-item {
    line-height: 20px !important;
}

14 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

.Mobile-overlay-nav--secondary a.Mobile-overlay-nav-item {
    line-height: 20px !important;
}

 

Thanks worked like a charm

Hi, I tried this but didn't work.

Where do you put it? 

I'm on 7.0

and I only know the design area where there is no place to put code that I know of

and the "pages" area. where you can go under "advanced" and add code - I tried that on all the home sub options to no avail. 

Thanks.

2 hours ago, adikarya said:

Hi, I tried this but didn't work.

 

Where do you put it? 

I'm on 7.0

and I only know the design area where there is no place to put code that I know of

 

and the "pages" area. where you can go under "advanced" and add code - I tried that on all the home sub options to no avail. 

 

Thanks.

Can you share link to your site?