Mobile Navigation Coding - Adding a Dropdown and positioning to the left? + 'Subscribe' link in the navigation bar?

Site URL: https://www.patriciateodoro.com

1. Hello! I am using the Wells template.

I am looking for help on how to add a drop down to the mobile navigation version of my website. When viewing the desktop version the link, 'Main' and 'Thought Tree' show a drop down with other links but with the mobile version it just shows all of them and it looks quite messy.

If that is not possible how can I add a line spacer/border above them so they're spaced out? I also tried making the drop down a:link smaller in font size but for some reason it also made the, 'Home' link small too and I couldn't figure out how to make the 'Home' link the same size as the other main links. The coding I tried wasn't correct.

I just want to seperate the main links between the dropdown/sub links as it's just a heap of links which makes it look overcrowded and messy.

The PW to the site is: thankyou2021

2. Also how can I position the navigation links to the left with some left padding? I did try it before but some links didn't align to the left.

3. Also is it possible to add a 'subscribe' link to my navigation bar. For example, 'SUBSCRIBE' placed under 'CONTACT' and once you click the subscribe link, a dropdown little box appears with a form to enter your email? Or is this not possible?

Thank you so much Squarespace members!

Hi.

Add to Design > Custom CSS

/* dropdown size mobile */
@media screen and (max-width:800px) {
#mobileNav nav ul li ul a {
    font-size: 12px !Important;
}
}

To make form lightbox, you can use this plugin.