Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 NAV CUSTOM FONT CSS


sunrisehomestead

Question

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

 

 

Link to comment

19 answers to this question

Recommended Posts

  • 1

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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; }

Edited by sixmileshigh
typos
Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

Screenshot 2020-11-15 at 08.54.46.png

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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. 

 

Link to comment
  • 0
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:

Screenshot 2021-07-09 at 12.26.44.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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:

Screenshot 2021-07-09 at 12.26.44.png

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

agripabadza.com-01-min.png

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

https://agripabadza.com/

agripabadza.com-02-min.png

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

https://agripabadza.com/store

agripabadza.com-03-min.png

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

https://agripabadza.com/

agripabadza.com-04-min.png

5. (Tablet – Store) Logo overlaps text.

https://agripabadza.com/store

agripabadza.com-05-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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!

Untitled-1a.jpg

Untitled-1b.jpg

What is site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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