Jump to content

Custom Mobile Menu Font (Avenue)

Go to solution Solved by tuanphan,

Recommended Posts

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

Hi Squarespace,

I've been trying to edit the appearance of the mobile navigation menu on my website (linked), but have so far had no luck. I'm using the Avenue template, version 7.0.

I would like to edit the font on mobile so it matches the web version, which uses the "Univers" typeface. In the screenshot I've attached: I'd like the text highlighted in the green box to match the text highlighted in the pink box. Does anyone know of a CSS code I could use for this task?

Additionally, it would be nice if I could slightly reduce the size of the project names under the "WORK" tab (the text that reads "Kits Point Residence", "Lewis Lake Cabin", etc. etc.). I'm generally unsure of how to target text for mobile view, so I'm having a lot of issues here...

Thanks so much for your help!

mobile screenshot.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Add to Home > Design > Custom CSS

@media screen and (max-width:750px) {
nav.main-nav.mobileNav * {
    font-size: 15px !important;
}
div#mobileMenuLink a {
    font-size: 12px !important;
}
.project-title {
    font-size: 5px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
50 minutes ago, aap_avan said:

@tuanphan sorry it took me so long to see this! for some reason the forum didn't send me a notification... This worked perfectly though. Really appreciate your help 🙂

(By default, the forum will not send email notifications)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.