Jump to content

Use a costum font for mobile and desktop hamburger navigation

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://taranaomi.squarespace.com

Hi Everyone!

I'm wondering if someone could help me out with changing my navigation typeface to a custom typeface. I was able to change to a custom typeface for my h1, h2, h3, p etc. but for some reason can't change my links within the hamburger navigation itself. So far I have this;

@font-face {
font-family: 'Voyager-Regular';
src: url(https://static1.squarespace.com/static/6015f371cbc71f649dab977e/t/6052b16db706164bacfb8e7a/1616032109736/Voyage-Regular.otf)
}

h1 {
  font-family: 'Voyager-Regular';}

h2 {
  font-family: 'Voyager-Regular';}

h3 {
  font-family: 'Voyager-Regular';}

h4 {
  font-family: 'Voyager-Regular';}

p {
  font-family: 'Voyager-Regular';}

.header-nav {
    display: none;
}

.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}

I've attached screenshots so you can see what I'm referring to. Headings work great on my other pages, it's just the links within the hamburger menu that won't change for both mobile and desktop.

 

Screen Shot 2021-05-23 at 5.11.33 PM.png

Screen Shot 2021-05-23 at 5.11.41 PM.png

Edited by caffeineandcopics
mistake
Link to comment
  • Solution

It needs this code

div.header-menu-nav-item * {
    font-family: 'Voyager-Regular';
}

 

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
  • 4 weeks later...
  • 3 weeks later...
On 6/21/2021 at 9:15 PM, caffeineandcopics said:

Thank you so much! you are a gem

Need support on these?

Site URL: https://taranaomi.squarespace.com/

1. (All devices – homepage) Reduce white space?

https://taranaomi.squarespace.com/

taranaomi.squarespace.com-01-All-devices

2. (All devices – Product) Buttons are hard to see

https://taranaomi.squarespace.com/

taranaomi.squarespace.com-02-All-devices

3. (Mobile – Homepage) Want to show 2 images/row?

https://taranaomi.squarespace.com/

taranaomi.squarespace.com-03-Mobile-home

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.