Navigation folder and Mobile navigation custom font - York Family

Hey Folks, 

I have added a custom font for my Nav menu but I'm having a couple of problems.

1. I want to change the colour of the subfolder font. I have actually already managed this, however it's also changing the colour of the last option on my main navigation.

2. I need to change it for mobile too. Non of the desktop settings have altered the mobile yet. 

Thanks in advance 🙂

15 minutes ago, TomBatch said:

Hey Folks, 

I have added a custom font for my Nav menu but I'm having a couple of problems.

1. I want to change the colour of the subfolder font. I have actually already managed this, however it's also changing the colour of the last option on my main navigation.

2. I need to change it for mobile too. Non of the desktop settings have altered the mobile yet. 

Thanks in advance 🙂

Can you share your site with the protected password (if it has) so I can take a look?

Hey. Yeah - Here is the site: https://www.batchcoffee.co.uk/

This is affect the color of just the sub nav items in the dropdowns:

.subnav a {
   color:dimgrey !important;
}

Great, thanks mate. That worked 🙂

Any idea about the mobile nav?

Try this:

a.nav-item-page {
   color:dimgrey !important;
}

So that is kind of working. 

I need to change the font on the main nav on the mobile first I think. 

Any idea?

This is what I have as so far:

@font-face {   
font-family: 'SuisseIntl-Bold';   
src: url(https://static1.squarespace.com/static/5d9633b6cd5e945f60815067/t/6357fb45a1061a1d0112278a/1666710342121/SuisseIntl-Bold+%281%29.otfURL.ttf/.otf), url(https://static1.squarespace.com/static/5d9633b6cd5e945f60815067/t/6357fb45a1061a1d0112278a/1666710342121/SuisseIntl-Bold+%281%29.otfURL.woff), url(https://static1.squarespace.com/static/5d9633b6cd5e945f60815067/t/6357fb45a1061a1d0112278a/1666710342121/SuisseIntl-Bold+%281%29.otfURL.woff2);}
h3 {font-family: 'SuisseIntl-Bold';}
h2 {font-family: 'SuisseIntl-Bold' !important;}
h1 {font-family: 'SuisseIntl-Bold'!important;}
header#header * {font-family: 'SuisseIntl-Bold';}
.subnav a {
   color:dimgrey !important;
}
a.nav-item-page {font-family: 'SuisseIntl-Bold';}
a.nav-item-page {
   color:dimgrey !important;
}
.BlogItem-title {
font-family: 'SuisseIntl-Bold';}

This should work for all of the nav items on mobile:

.mobile-primary-nav-links {
    font-family: 'SuisseIntl-Bold' !important;
}

Ziggy! Absolute hero. All works great. 

Thanks mate. 

No problem, can you mark it as the solution to this thread and upvote? Thanks!