Editing both Navigation AND Header

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.

Hi. Can you share link to your site? We can check easier

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?

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?

 

 

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

Thank you @tuanphan. 

Do you have any insight regarding how to style footer fonts?

On 4/16/2021 at 1:20 AM, nicktotallyrelaxed said:

Thank you @tuanphan. 

Do you have any insight regarding how to style footer fonts?

You mean font name or color or size or..?

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.

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

Hi @tuanphan the site is live:

https://www.citiesindustjewelry.com/

Thanks 🙂

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

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

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?

@tuanphan it's the footer. Sorry I should have included a screenshot!