Reduce spacing between navigation links on forced mobile menu

Site URL: https://marguerite-elliot.squarespace.com/

Hey folks -

I'm forcing mobile navigation on all devices with this website, but the gap between the links gets really huge when viewed on desktop. I've tried targeting the line-height between the links but had no luck... the settings in the style editor are great for mobile view, but as soon as the screen size increases the links seem to grow in size, as does the space between them.

Would love to tweak the spacing overall, but specifically for the smaller (sub) links

Have attached a screengrab - thanks in advance!

Sx

Add to Design > Custom CSS

/* desktop menu spacing */
@media screen and (min-width:768px) {
.container.header-menu-nav-item a {
    margin-top: 10px;
    margin-bottom: 10px;
}
}

On 3/5/2021 at 1:41 PM, tuanphan said:

Add to Design > Custom CSS

/* desktop menu spacing */
@media screen and (min-width:768px) {
.container.header-menu-nav-item a {
    margin-top: 10px;
    margin-bottom: 10px;
}
}

 

Thanks so much @tuanphan - that did the trick! Much appreciated 🙂

On 3/8/2021 at 7:37 PM, Webswool said:

Thanks so much @tuanphan - that did the trick! Much appreciated 🙂

Hi. Do you want to align left "Process" on mobile?

Oh yeah that'd be great @tuanphan - thank you!

On 3/5/2021 at 1:41 PM, tuanphan said:

Add to Design > Custom CSS

/* desktop menu spacing */
@media screen and (min-width:768px) {
.container.header-menu-nav-item a {
    margin-top: 10px;
    margin-bottom: 10px;
}
}

 

I genuinely love you. I've been trying to fix this issue for 2 days.

Thank you for sharing this!!! Super helpful!