How can I make sub-headings bold in Craft theme?

Store Design
, ,
1

Hi, im hoping to make these headings in my mega menu bold but can’t find the correct code - is anyone able to help? https://theonlinetoyshop.co.uk/ its the headings ‘Outdoor Toys’ ‘Indoor Toys’ etc

2

Hi @OnlineToyShop . Hope you are doing well.

Please go to theme editor and put this line of code in “Custom CSS” section (https://snipboard.io/ew6bOp.jpg)

.mega-menu__link--level-2 { font-weight: 700; }
3

Thank you for your quick reply! Ive tried this but its not changed anything

4

Hi. You’ve added it in wrong way.

It should be like that

.mega-menu__link--level-2 {font-weight: 900;}

NOT like that

5

Thank you, i didnt add the style in previously but maybe i have messed around with the code… it seems to have worked on two category headings (namely Furniture and Ride On Toys) but not the others… they are also a little small? Thanks again :slightly_smiling_face:

6

Yes. I saw these lines of code in your component-mega-menu.css file

.mega-menu__list li:nth-child(5) .mega-menu__link--level-2 {
font-size: 15px!important;
font-weight: 700!important;
}

.mega-menu__list li:nth-child(6) .mega-menu__link--level-2 {
font-size: 15px!important;
font-weight: 700!important;
}

That make the “Furniture” and “Ride On Toys” bold and smaller than others.

Please check it.

7

Thanks, ok i have removed those now, included your customer CCS as you detail above but it has still not changed the titles in the sub menu to bold…

8

Hi. I’m checking your online store but seems not able to find my code. Could you share where did you add it ? Thanks

9

Sure, see attached screenshot and its been added to the custom CCS section

10

OnlineToyShop_0-1704132646473.png
OnlineToyShop_0-1704132646473.png834×558 38.3 KB

11

Hi @OnlineToyShop

Try this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “component-mega-menu.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.mega-menu__link--level-2 {
    font-weight: 900 !important;
}

And Save.

Result:

Made4uoRibe_0-1704139285080.png
Made4uoRibe_0-1704139285080.png1725×212 9.12 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

12

Amazing thank you so much thats worked!