Jump to content

Editing both Navigation AND Header

Recommended Posts

Hello! I've tried searching for this answer on the forum and on the web but have come up empty handed. Apologies if I have missed anything.

 

I am trying to edit both the navigation font AND the header font of my footer. They would be 2 different fonts:

Header: Souvenir

Navigation: Helvetica Neue

 

I found helpful advice to include this code:

.Footer-nav {
    font-family: Souvenir;
}

 

However, it changes the navigation to souvenir, not the header (Info, Orders, Social). Does anyone have tips on how to differentiate between these? Thanks in advance for your time. Also, I'm editing a template right now so it is not live, not sure if you need it to be live to assist however I am including a screenshot.

 

Screen Shot 2021-04-13 at 11.27.23 AM.png

Screen Shot 2021-04-13 at 11.29.30 AM.png

Link to comment
  • Replies 12
  • Views 479
  • Created
  • Last Reply
21 hours ago, nicktotallyrelaxed said:

Hi @tuanphan

Thank you!

Site is:

https://www.citiesindustjewelry.com/

 

Also, I'm having a hard time with the footer not stacking correctly on mobile. Any ideas?

 

 

Screen Shot 2021-04-14 at 11.39.57 AM.png

Add to Design > Custom CSS

/* Footer stack */
@media screen and (max-width:640px) {
nav.Footer-nav>div {
    float: none !important;
    width: 100% !important;
    min-width: unset !important;
}
nav.Footer-nav {
    width: 100%;
}
}

 

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

Hi! @tuanphan

I am trying to edit both the navigation font AND the header font of my footer. They would be 2 different fonts:

Header: Souvenir

Navigation: Helvetica Neue

 

I found helpful advice to include this code:

.Footer-nav {
    font-family: Souvenir;
}

However, it changes the navigation to souvenir, not the header (Info, Orders, Social). Does anyone have tips on how to differentiate between these? Thanks in advance for your time. Also, I'm editing a template right now so it is not live, not sure if you need it to be live to assist however I am including a screenshot.

Link to comment
On 4/18/2021 at 2:42 AM, nicktotallyrelaxed said:

Hi! @tuanphan

I am trying to edit both the navigation font AND the header font of my footer. They would be 2 different fonts:

Header: Souvenir

Navigation: Helvetica Neue

 

I found helpful advice to include this code:

.Footer-nav {
    font-family: Souvenir;
}

However, it changes the navigation to souvenir, not the header (Info, Orders, Social). Does anyone have tips on how to differentiate between these? Thanks in advance for your time. Also, I'm editing a template right now so it is not live, not sure if you need it to be live to assist however I am including a screenshot.

You can duplicate site, set template on the duplicated site & share its url. We can check easier

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
21 hours ago, nicktotallyrelaxed said:

Hi @tuanphan the site is live:

 

https://www.citiesindustjewelry.com/

 

Thanks 🙂

Add to Design > Custom CSS

/* footer nav font */
.Footer-nav-group * {
    font-family: Souvenir;
}

 

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

@tuanphan I can't thank you enough! That's perfect for the header.

For some reason I can't figure out changing the navigation font not the header. I thought it would be

 .Footer-nav-folder-item

But that doesn't work. 

To be clear I want Info "About" to be in Souvenir but "Jewelry Care Stockists FAQ" in Helvetica Neue.

Any help would as always be very much appreciated.

 

Link to comment
17 hours ago, nicktotallyrelaxed said:

@tuanphan I can't thank you enough! That's perfect for the header.

For some reason I can't figure out changing the navigation font not the header. I thought it would be

 .Footer-nav-folder-item

But that doesn't work. 

To be clear I want Info "About" to be in Souvenir but "Jewelry Care Stockists FAQ" in Helvetica Neue.

Any help would as always be very much appreciated.

 

Where is it?

image.thumb.png.eec2eb0bef64a3e3f465fab647539fda.png

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.