Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to change mega menu font prestige theme

Solved

How to change mega menu font prestige theme

emilyaugstudios
Pathfinder
122 1 58

Hi, I'm currently using the prestige theme and want to change the main menu navigation headers (SHOP / OUR WORLD / INFO / SEARCH / CART) to my body font, rather than my heading font. Currently this section uses 'H6' and when I try to change this is also alters the mega menu dropdowns, which I don't want to change. Can anyone help with this please?

For reference I am using shopify's own fonts – 'ITC Caslon No 224' for headings and 'Avenir Next' for body.

 

Screenshot 2024-08-06 at 15.07.02.pngScreenshot 2024-08-06 at 15.19.57.png

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
2350 688 810

This is an accepted solution.

 

 

.header__primary-nav .header__menu-disclosure .h6, .header__primary-nav-item .h6, .header__secondary-nav .h6.link-faded {
    font-family: var(--text-font-family) !important;
}

 

 

Can you replace to this code @emilyaugstudios 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 8 (8)

Ihor-Sh
Shopify Partner
79 11 17

Hi @emilyaugstudios . If you want to change font-size only for this part. You need to add new class name in liquid template and then style in with css.

Shopify troubleshootibility 😉
If you're satisfied with reply - don't forget to like it.
If you more than satisfied - mark it as solution 😉
You can find me here.
emilyaugstudios
Pathfinder
122 1 58

Hi @Ihor-Sh – I actually want to change the main header menu items from H6 font 'ITC Caslon No 224' to 'Avenir Next' which is my body font. Do you know the code for this?

BSS-TekLabs
Shopify Partner
2350 688 810

Hello @emilyaugstudios .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
emilyaugstudios
Pathfinder
122 1 58

Hi @BSS-TekLabs – Thank you! The website address is https://927103-16.myshopify.com/ and I have removed the password for now.

BSS-TekLabs
Shopify Partner
2350 688 810

- Here is the solution for you @emilyaugstudios 
- Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.h6 {
    font-family: var(--text-font-family) !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1722955954127.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
emilyaugstudios
Pathfinder
122 1 58

Hi, that's great thank you. My only issue is that I don't want it to change all h6 headings to this style. I only want to target the main menu titles (SHOP / OUR WORLD / INFO / SEARCH / CART) - Is there anyway to only target these specific header menu areas?

BSS-TekLabs
Shopify Partner
2350 688 810

This is an accepted solution.

 

 

.header__primary-nav .header__menu-disclosure .h6, .header__primary-nav-item .h6, .header__secondary-nav .h6.link-faded {
    font-family: var(--text-font-family) !important;
}

 

 

Can you replace to this code @emilyaugstudios 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 810

I have updated the code. You can try them @emilyaugstudios .

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now