How can I make a sidebar menu item bold on my website?

Store Design

Topic summary

A user wants to make “Diwali Sale” bold in their sidebar menu and add animation to it.

Initial Solution:

  • ZestardTech provided CSS code targeting the sidebar menu link with font-weight: bold and color: red
  • Code should be added to Assets > theme.css in Shopify theme editor

Animation Request:

  • User asked about adding animation to the bold text
  • foxdeveloper suggested using CSS keyframes for text animation
  • Provided example code with animation effects

Implementation Issue:

  • User reported the code didn’t work after adding it
  • foxdeveloper identified the problem: CSS comments were accidentally copied, breaking the code
  • Solution: Remove the comment lines (marked with //) from the CSS file

Status: Troubleshooting phase - awaiting confirmation that removing comments fixes the implementation.

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

Hey there, I would like to make the word ‘Diwali Sale’ in my sidebar menu in bold. How can I do that?

My website is www.gemopticians.com

Thanks in advance.

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the Bottom of the file:
.SidebarMenu__Nav .Collapsible a[href="/collections/diwali-sale"] {
    font-weight: bold!important;
    color: red!important;
}

ZestardTech_0-1699348050871.png
ZestardTech_0-1699348050871.png1902×655 115 KB

3

Hey!

Thank you so much for this.

Can we add an animation to this also?

1 Like
4

Hello there,

You change the animation image from the backend.

5

What do you mean by change the animation image?

6

Hey Trivin,

Do you mean an animation to the text itself? if so, you can add the following CSS using Keyframes.

For example, if you used ZestardTech’s CSS above, your CSS with the animation will look like this:

I hope this helps!

7

I added this code to Assets > theme.css but nothing has really changed. Could you please double check?

8

Hey Triven, I checked and it seems like you’ve copied the comments too which is breaking it. I added these just to separate ZestardTech’s code and our code. Make sure to remove//Shopifox Animation CSS, // to make it faster, decrease this & //ZestardTech CSS from the CSS file. Let me know if it works :slightly_smiling_face: