Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
gottahustle777

How to change mobile menu font size in 7.1?

Question

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!

Edited by gottahustle777

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0
On 2/8/2020 at 8:07 AM, tuanphan said:

Add to Home > Design > Custom CSS


.header-menu-nav-item a {
    font-size: 10px;
}

 

Hi,

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...