How to change mobile menu font size in 7.1?

Hi all. I'm a CSS newbie, but am starting to get the hang of it. Have made a few customizations that have worked thus far to both the standard and mobile site. I don't know if any of those customizations are overriding what I'm trying to do with the mobile menu font size, which is too big and I just want to bring it down a notch.

Here is the code that I found that folks were saying worked (not working for me). I've tried adding the '!important;' tag after font-size as well and had no luck with that. 

Quote

.Mobile-overlay-nav-item {
                       font-family: 'your-font' !important;
                       font-weight: 200;
                       font-style: normal;
                       font-size: 30px;
                       letter-spacing: 0em;
 }

And here is all the code I have already on my site, in case it's relevant. All of this code works properly:

Quote

@media screen and (max-width: 960px)
{
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 15px;
  }
  h4 {
    font-size: 15px;
  }
}
@font-face {   
font-family: 'ailerons';   
src: url(https://static1.squarespace.com/static/5dff7419d2a02a53932dffc4/t/5e09879e62f19604dac96281/1577682846474/Ailerons-Regular.otf), url(https://static1.squarespace.com/static/5dff7419d2a02a53932dffc4/t/5e0987af74877f00dbeb8c8c/1577682863669/Ailerons-Regular.woff), url(https://static1.squarespace.com/static/5dff7419d2a02a53932dffc4/t/5e0987ba41180e2960f7dba7/1577682874399/Ailerons-Regular.woff2); 
}
h1 {
  font-family: 'ailerons';
}
h2 {
  font-family: 'ailerons';
}
h4 {
  font-family: 'ailerons';
}
.newsletter-block .newsletter-form-header-title {
    font-family: ailerons;
    font-size: 25px;
}
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: brandon-grotesque;
font-weight: 300;
font-size: 14px !important;
text-transform: uppercase;
letter-spacing: 2px;
 } }

I'm still building the site so it's not public yet. Again, I just want to change the SIZE of the mobile menu font so it's slightly smaller. 

Thank you!

Love this - sorted my issue perfectly.

Thanks for your code @timoneill. Worked like a charm!

Thanks, this worked great! Changed it to 18px. Much better than the mega letters it was earlier.

Hello! Wondering if anyone knows how to change the menu overlay button font size? It's much smaller than the nav links and I want to increase it. Thanks!

On 1/28/2021 at 5:20 PM, PearlsandPoets said:

Hello! Wondering if anyone knows how to change the menu overlay button font size? It's much smaller than the nav links and I want to increase it. Thanks!

If you share site url, we can help easier

Worked a treat, @timoneill, How to change button nav as well? I tried nav item b at a guess but it didn't work. See attached 'Projects' button.

Thanks!

T

On 2/2/2021 at 11:32 PM, tuanphan said:

If you share site url, we can help easier

For sure! Silly me. 

https://www.pearlsandpoets.com

I think I've worked it out!

Thank you!

On 2/13/2021 at 5:27 AM, PearlsandPoets said:

For sure! Silly me. 

https://www.pearlsandpoets.com

I think I've worked it out!

Thank you!

Do you still need help??

On 2/14/2021 at 5:29 AM, tuanphan said:

Do you still need help??

Thank you! I asked it on another thread and got support, so it's all fixed now. 

On 3/16/2020 at 1:10 PM, timoneill said:

Hi,

Try the above from another poster tuanphan...the CSS works well for me

This works great! Thank you!

On 2/11/2021 at 1:11 AM, TDavy said:

Worked a treat, @timoneill, How to change button nav as well? I tried nav item b at a guess but it didn't work. See attached 'Projects' button.

Thanks!

T

This is a good tutorial that might help. She talks about how to stylize the button. 

Hi!
I am also trying to change the sizing of my menu in the mobile version, but the coding here doesn't work for me. How do I do?

Site's URL: 
spinach-sprout-hgc2.squarespace.com

(OR www.medvetenkultur.org if the domain connection has been made. In that case the password would be medvetenkultur)

On 12/9/2022 at 12:11 AM, EbbaHar said:

Hi!
I am also trying to change the sizing of my menu in the mobile version, but the coding here doesn't work for me. How do I do?

Site's URL: 
spinach-sprout-hgc2.squarespace.com

(OR www.medvetenkultur.org if the domain connection has been made. In that case the password would be medvetenkultur)

Add to Design > Custom CSS
 

div.header-menu-nav-item * {
    font-size: 14px !important;
}