Changing font weight and style in mega menu

Store Design
1

Hi There,

I would like to change the Style and Weight of the headers and subheaders used in our mega menu. I can’t seem to find it in the code. We are using the Impulse theme.

You can see it here: https://04k0exd0fe30uojn-6622838853.shopifypreview.com/

Bicicletta_0-1610047607740.png
Bicicletta_0-1610047607740.png3025×1104 181 KB

Thanks so much for your help!

Sarah

2

@Bicicletta You can use the css selector “.megamenu .site-nav__dropdown-link” to update the font style and weight at the end of your theme.scss file.

For example:

.megamenu .site-nav__dropdown-link {
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
}
3

Dear @Bicicletta

Hope it will work

  1. From your Shopify admin, go to Online Store > themes.
  2. Locate your current theme and then click Actions > Edit code.
  3. After that in the Assets folder, click to open your theme.scss.liquid file.
  4. Go to the very bottom of this file and paste the following code:
/* Start */
.megamenu .site-nav__dropdown-link {font-weight: 500 !important;letter-spacing: normal;font-size: 14px !important;}     /* You can change the Font size/Font weight yourself */
/* End*/
  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.
4

Thank you so much! It worked perfectly!

5

Hi there,

Do you know how to change the header and sub header font weights separately? I would like H5 to be regular and H6 to be lighter.

Bicicletta_0-1610148886120.png
Bicicletta_0-1610148886120.png3443×1042 184 KB

Thank you!

Sarah

6

Dear @Bicicletta

Need to check your store backend for this. If you are ok with this you can contact us.

7

Hello

I found that for updating the header without updating the subheader, you can use the

site-nav__dropdown-link site-nav__dropdown-link–top-level class name, like so:

__/* Start */__

<strong>.megamenu .site-nav__dropdown-link site-nav__dropdown-link--top-level {font-weight: 500 !important;letter-spacing: normal;font-size: 14px !important;}     /* You can change the Font size/Font weight yourself */</strong>

__/* End*/__

Hope that helps