7.1 NAV CUSTOM FONT CSS

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

Hey ya'll- hitting a wall here.

Earlier I uploaded a custom font, did the css, and applied it to all the H categories I wanted. The whole site is dialed in with my custom font exactly where I want it EXCEPT I cant for the life of me figure out the CSS to get my Navigation links to convert to my new custom font.  "About, Projects, Contact" for both standard and mobile views.

I did a ton of research both on this forum and via google and tried everything under the sun that I could find and those navigation links just would not change to my custom font. 

Can anyone give me a hand here and help me out with the CSS Code to make this happen for both my standard and mobile site?

REALLY REALLY APPRECIATE IT GUYS!

SUNRISEHOMESTEAD.COM

Nick

@tuanphan excellent! it worked! so grateful for your help. be safe out there! Nick

Hi,

Is there a way to customise the font size for the nav to be different to the desktop font size?

12 hours ago, Tusc said:

Hi,

 

Is there a way to customise the font size for the nav to be different to the desktop font size?

@media screen and (max-width:767px) {
nav.header-menu-nav-list * {
    font-size: 10px !important;
}
}

@tuanphan I always love your answers but on this occasion, I cannot get it to work for me.

I uploaded a custom font and here's the end of the code. (The first bit is repeated above for each font weight). All the H1- H4 and P work but I cannot get the nav or title to change. Can you help? Site is www.systemsandsmiles.com.

@font-face {    
    font-family: 'SUPERNETT CONDENSED LIGHT ITALIC';       
        src: url('https://static1.squarespace.com/static/5f6b5b2a0674315a2fc2157f/t/5f6b6891344f544bfdbb9158/1600874647517/FaceType+-+Supernett+Condensed+Light+Italic.otf');  
}

h1 {font-family: 'SUPERNETT CONDENSED BOLD ITALIC';}
h2 {font-family: 'SUPERNETT REGULAR';}
h3 {font-family: 'SUPERNETT LIGHT';}
h4 {font-family: 'SUPERNETT CONDENSED REGULAR';}
P {font-family: 'SUPERNETT REGULAR';}

/* Custom Font - Site Title */

.logo.site-title a {
   font-family: 'SUPERNETT REGULAR' !important;
}

/* Font Nav */
div #topNav a {
  font-family: 'SUPERNETT REGULAR' !important; }

29 minutes ago, sixmileshigh said:

@tuanphan I always love your answers but on this occasion, I cannot get it to work for me.

I uploaded a custom font and here's the end of the code. (The first bit is repeated above for each font weight). All the H1- H4 and P work but I cannot get the nav or title to change. Can you help? Site is www.systemsandsmiles.com.

@font-face {    
    font-family: 'SUPERNETT CONDENSED LIGHT ITALIC';       
        src: url('https://static1.squarespace.com/static/5f6b5b2a0674315a2fc2157f/t/5f6b6891344f544bfdbb9158/1600874647517/FaceType+-+Supernett+Condensed+Light+Italic.otf');  
}

h1 {font-family: 'SUPERNETT CONDENSED BOLD ITALIC';}
h2 {font-family: 'SUPERNETT REGULAR';}
h3 {font-family: 'SUPERNETT LIGHT';}
h4 {font-family: 'SUPERNETT CONDENSED REGULAR';}
P {font-family: 'SUPERNETT REGULAR';}

/* Custom Font - Site Title */

.logo.site-title a {
   font-family: 'SUPERNETT REGULAR' !important;
}

/* Font Nav */
div #topNav a {
  font-family: 'SUPERNETT REGULAR' !important; }

#topNav is not class in SS 7.1.

nav.header-menu-nav-list * {
   font-family: 'SUPERNETT REGULAR' !important;
}

@tuanphan thanks but that doesn't seem to have worked. It's as though it's not recognising the class after .nav.

Please check out the attached screenshot.

On 11/15/2020 at 3:56 PM, sixmileshigh said:

@tuanphan thanks but that doesn't seem to have worked. It's as though it's not recognising the class after .nav.

Please check out the attached screenshot.

Can you share site url? We can check easier

On 4/29/2020 at 7:51 AM, tuanphan said:

@media screen and (max-width:767px) {
nav.header-menu-nav-list * {
    font-size: 10px !important;
}
}

I was attempting to alter mobile view navigation font size and this worked a treat. 

On 3/26/2020 at 9:22 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav *, nav.header-menu-nav-list * {
    font-family: yourfont;
}

 

Hi,

For some reason this hasn't worked for me either, could you please help?

Here's my web url:

https://agripabadza.com/

Here's the coding I'm using:

On 7/9/2021 at 6:27 PM, GripaForBT said:

Hi,

 

For some reason this hasn't worked for me either, could you please help?

Here's my web url:

https://agripabadza.com/

 

Here's the coding I'm using:

Use this new code

@font-face {
    font-family: 'TOLEDO';
    src: url('https://static1.squarespace.com/static/5b64882555b02c39c3fc8fec/t/60e8142d1c6ee137fa130523/1625822253433/SoftMaker+-+ToledoSerial.otf');
}
header#header *, .mobile-bar-wrapper *, h1, h2, h3, p {
    font-family: 'TOLEDO' !important;
}

Thank you so much this worked perfectly!!

18 hours ago, tuanphan said:

Use this new code

@font-face {
    font-family: 'TOLEDO';
    src: url('https://static1.squarespace.com/static/5b64882555b02c39c3fc8fec/t/60e8142d1c6ee137fa130523/1625822253433/SoftMaker+-+ToledoSerial.otf');
}
header#header *, .mobile-bar-wrapper *, h1, h2, h3, p {
    font-family: 'TOLEDO' !important;
}

 

Hi I have a new query how do I make this code apply  to the mobile view?

5 minutes ago, GripaForBT said:

Hi I have a new query how do I make this code apply  to the mobile view?

Which element on mobile?

On 7/9/2021 at 6:27 PM, GripaForBT said:

Hi,

 

For some reason this hasn't worked for me either, could you please help?

Here's my web url:

https://agripabadza.com/

 

Here's the coding I'm using:

Hi. Do you want to fix these?

Site URL – https://agripabadza.com/

1. (Desktop – Work) Reduce space?

https://agripabadza.com/flash-provoke-eat-my-dust-1

2. (Mobile/Tablet – Homepage) Scroll bar at the bottom of page.

https://agripabadza.com/

3. (Mobile – Header) The header is transparent, so when scrolling down, it overlaps the text below.

https://agripabadza.com/store

4. (Mobile – Menu) Change color of text About?

https://agripabadza.com/

5. (Tablet – Store) Logo overlaps text.

https://agripabadza.com/store

Yes please how can I go about making these changes

On 7/23/2021 at 9:36 PM, GripaForBT said:

Yes please how can I go about making these changes

 

Q1. It is white space within image. 
https://images.squarespace-cdn.com/content/v1/5b64882555b02c39c3fc8fec/1612102366930-0CUIPJARLJB746A9G2S3/EMD+SQUARE.jpg?format=1500w

Q2. Add to Design > Custom CSS

/* remove scroll bar */
html, body {overflow-x: hidden;}

Q3. Do you want to add header background on scroll?

Hello, i have a similar problem, ive managed to update all the fonts on the site to SoehneBreit - but i cant find out how to target the sub-nav font, any help would be hugely appreciated!

On 8/20/2021 at 6:47 PM, mattclugston said:

Hello, i have a similar problem, ive managed to update all the fonts on the site to SoehneBreit - but i cant find out how to target the sub-nav font, any help would be hugely appreciated!

What is site url?

Hey @tuanphan, thanks so much for your answers on how to add custom text to various parts of the site -- I have been finding them very helpful on various posts. However, I still can't seem to get my Navigation (header and footer) and also my Image Cards (title and subtitle) to update to my new fonts, Barlow Condensed and Barlow. Can you help? My site url is https://barronleadership.co/

On 10/2/2021 at 12:17 AM, brooksb said:

Hey @tuanphan, thanks so much for your answers on how to add custom text to various parts of the site -- I have been finding them very helpful on various posts. However, I still can't seem to get my Navigation (header and footer) and also my Image Cards (title and subtitle) to update to my new fonts, Barlow Condensed and Barlow. Can you help? My site url is https://barronleadership.co/

Use this CSS

div#headerNav * {
    font-family: 'Barlow Condensed' !important;
}
.design-layout-card * {
    font-family: 'Barlow Condensed' !important;	
}
nav#secondaryNavigation * {
    font-family: 'Barlow' !important;
}

@tuanphan thank you so much!!! That worked great. Now there are just two remaining places on the site where the font still isn't cooperating:

1) Forms (see "join our community" form at the footer of home page, or the Contact page) -- Field titles and the submit button are still in the old font.

2) The title for the last section at the bottom of the home page (Hi, I'm Brooks).

Can you help with those too?

Oh and also the date at the top of this blog post: www.barronleadership.co/blog/2021/10/1/introducing-starlight-leadership

On 10/5/2021 at 4:01 AM, brooksb said:

Oh and also the date at the top of this blog post: www.barronleadership.co/blog/2021/10/1/introducing-starlight-leadership

Use this

/* Form */
div.form-block * {
    font-family: 'Barlow' !important;
}
/* hi Im brooks */
div#block-58de8ab03c2d64a29418 .image-title p {
    font-family: 'Barlow' !important;
}
/* blog date */
.entry-dateline-link {
    font-family: 'Barlow' !important;
}