How to style OVERLAY MENU DESKTOP vs OVERLAY MOBILE

https://www.lacalifornie.es/

Hello, I am going a bit crazy. Hopefully I can find some help in here.

I currently have an added code to trigger the overlay menu on desktop at a specific width. I did this to avoid having the nav links stacking when resizing the browser. 

The code is:
/*** Trigger mobile menu earlier ***/
@media screen and (max-width:1290px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

I am also using this plugin for mobile https://schwartz-edmisten.com/plugins/p/modern-mobile-menu-dropdown-for-squarespace 

I will like to be able to control the size and spacing of the links on both the overlay menu version for Desktop and the overlay menu version on mobile, separately.

Additionally I also have Squarekicker installed. 
Please i need help/guidance on where/how to adjust the styling for these.

Thanks in advance!
 

You mean adjust these items size/spacing

Hi @tuanphan.

What I am looking for is to adjust the size of the links and sub-links (under SHOP) as well as the spacing on the OVERLAY MENU DESKTOP VIEW only. I am happy with how the overlay menu on MOBILE VIEW link look right now so it is important to make sure I can style them separately. Is this possible? 

 

Mobile: Size of Shop title + Shop sub links?

Desktop: spacing of these items?

Hi @tuanphan I am looking to adjust the size and spacing of the links on the OVERLAY MENU VERSION on DESKTOP. See the screenshot I attached above. This overlay menu triggers at a specific browser width. I don´t need to change anything on the Mega Menu layout on Desktop. Let me know if this does not make sense, maybe I am not explaining right...

Hello @tuanphan any chance you can take a look at this? Thanks so much!