Style forced OVERLAY MENU ON DESKTOP

Hello!

I currently have some custom CSS to force an OVERLAY MENU only when the browser hits a specific size; to avoid having the nav links stacked when making small the browser.

I am not happy with the way it looks (see screenshot) , I want to make some adjustments to the links size, and spacing. Can ypou help to achieve this? I want to make sure tjis adjustments DO NOT affect the OVERLAY MENU on mobile.

Thanks in advance!
 

Can you share site url?

here it is https://www.lacalifornie.es

@tuanphan

Use this CSS code

/* Mobile nav items */
div.container.header-menu-nav-item * {
    font-size: 30px;
}
div.mobile-custom-info a {
    font-size: 30px !important;
    margin-top: 10px !important;
}

Thank you @tuanphan, unfortunately this code affects both the OVERLAY MENU on DESKTOP and OVERLAY MENU on MOBILE. I am trying to style these two separately, in this case I need to style OVERLAY MENU on DESKTOP:

- type size: of main links and links within the SHOP dropdow (two different sizes)
- type size: of Instagram and Email links
- type size of language switcher 

- padding on the left of all elements so they are all left aligned
- Vertical spacing/padding between elements
 

- apply the same behaviour to the language switcher as on desktop. Selected language bolded:
ESP / ENG 

Thank you so much for your time on this.

@tuanphan a  visual reference of what I am trying to achieve.