Making menu items bold but leaving submenu items with normal font weight in Craft theme.

Technical Q&A

Topic summary

A Shopify beginner using the Craft theme wants to apply bold font-weight to main menu items while keeping submenu items at normal weight.

Initial Attempt:

  • Successfully made all menu items bold using .list-menu__item a { font-weight: 700; }
  • However, this affected both main and submenu items

Solutions Tried:
Multiple CSS approaches were attempted (including ChatGPT-generated code), but none worked initially.

Working Solution:
After examining the HTML structure, the user found this CSS successfully achieved the desired result:

.site-header__menu li a {
  font-weight: bold;
}
.site-header__menu .sub-menu li a {
  font-weight: normal;
}

This targets main menu links with bold styling, then overrides submenu links back to normal weight. Another user confirmed the solution works perfectly.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi!

I’m new to Shopify, i’m currently doing my first store. I want to make my menu items bold and leave submenu items normal. However, the solutions I found online don’t seem to work.

This code worked if I wanted to make all items (including submenus) bold.

.list-menu__item a {
  font-weight: 700;
}

I asked ChatGPT if it can provide a solution and it came up with these options:

1.)

.list-menu__item:not(.list-menu__item--sub-menu) a {
  font-weight: 700;
}

2.)

<style>
  .site-header__menu li a {
    font-weight: bold;
  }
  .site-header__menu .sub-menu li a {
    font-weight: normal;
  }
</style>

However, none of these worked. My store link is www.cleanspire.hu if you wanna take a look.
Thanks in advance!

EDIT: After finding the HTML codes, I came up with this solution and it works:

.header__menu-item:not(.caption-large) {
  font-weight: 700;
}
1 Like
2

@Adrian1919

thanks for post its prefect work