Change font colour of item in sidebar collapsible menu

Topic summary

Goal: change the first sidebar menu item (“Glow & Glam Sale”) font color to red.

Proposed solution (Shopify Online Store 2.0 themes):

  • Navigate: Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS.
  • Add Custom CSS targeting mobile view (≤768px) to style the first collapsible menu item:
    • Selector uses nth-child(1) on the primary SidebarMenu and sets color: red !important.
  • Screenshots were provided to show where to add CSS and the resulting red text.

Access details: a responder asked for the store URL (and password if protected) to verify. The store URL was later shared (www.gemopticians.com), no password provided.

Notes/Considerations:

  • The provided CSS applies only on mobile (max-width: 768px). If desktop styling is needed, remove/adjust the media query.
  • CSS relies on theme-specific classes (SidebarMenu__Nav, Collapsible__Button); may require adjustment if the theme differs.

Status: solution steps provided, pending confirmation from the requester. No final resolution reported yet.

Summarized with AI on December 15. AI used: gpt-5.

Hello!

Could you please help me change font colour of the first menu item ‘Glow & Glam Sale’ in red in the sidebar menu?

Hello @Trivin , can you please share your store url and If the store is password-protected, kindly provide the password as well to facilitate access.

Hi @Trivin

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
nav.SidebarMenu__Nav.SidebarMenu__Nav--primary > div:nth-child(1) > button.Collapsible__Button {
    color: red !important;
}
}

Here is the result: https://prnt.sc/iIxQ3HCVpbrR

I hope this helps

Best,

Daisy

Hello! Its www.gemopticians.com