Bold the name of menu

Store Design

Topic summary

Issue: User wants to make all menu names bold on their Shopify store.

Solutions Provided:

Two community members offered CSS-based solutions:

  1. Desktop Implementation:

    • Navigate to Online Store → Theme → Edit code → theme.liquid
    • Add CSS code targeting menu links with font-weight: bold !important
    • Insert before </body> or </head> tag depending on the approach

  2. Mobile Compatibility:

    • Initial solution worked on desktop but not mobile
    • Additional CSS code provided using media query @media screen and (max-width: 767px) to target mobile menu elements
    • Targets menu drawer components specifically for mobile devices

Status: Both desktop and mobile solutions have been provided with code snippets and visual results. The discussion appears resolved with working implementations for both platforms.

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

What can I do if I want to bold all the name of the menu?

https://innotier.com/

InnoTier_0-1726804496459.png
InnoTier_0-1726804496459.png1380×423 26.2 KB

1 Like
2

Hello @InnoTier

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

a.mega-menu__link.link, .header__menu-item.list-menu__item.link.focus-inset{ font-weight: bold !important; }

Tech_Coding_0-1726806279115.png
Tech_Coding_0-1726806279115.png1341×415 17.1 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Hi @InnoTier ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1726805991706.png
BSSCommerceHDL_0-1726805991706.png1916×735 176 KB

Hope this can help you,

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

4

Works in computer, but not in mobile, how to bold the menu name in mobile too?

5

Hi @InnoTier ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1726807090114.png
BSSCommerceHDL_0-1726807090114.png650×869 52 KB

Hope this can help you,

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

6

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and(max-width: 767px){ .menu-drawer__close-button, .menu-drawer summary.menu-drawer__menu-item, .menu-drawer__menu-item{ font-weight: bold !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark my both solutions as an Accepted Solution.