Jump to content

Custom Mobile Menu Font (Avenue)

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
  • Views 585
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.