How to change mega menu font prestige theme

[emilyaugstudios]

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.

[Ihor-Sh]

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.

[emilyaugstudios]

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]

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.

[emilyaugstudios]

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

[BSS-TekLabs]

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

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

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

[emilyaugstudios]

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

[BSS-TekLabs]

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.