Fix Menu bar selector on shrine theme

Store Design
, , ,

Topic summary

A user seeks to customize the menu bar selector on the Shrine theme, specifically wanting the active menu item to have a light blue background (#B3D9FC).

Solutions Provided:

  • Two developers offered CSS code snippets to add to the theme’s base.css or style.css file
  • The code targets .header__active-menu-item to apply the custom background color, border-radius, and padding adjustments
  • Instructions included navigating to: Shopify Admin → Online Store → Themes → Customize → Edit Code

Follow-up Issues:

  • User reported an unwanted underline on the menu item (resolved by adding text-decoration: none !important;)
  • New problem emerged: the CSS code causes the menu background to become transparent instead of white, affecting both the sticky add-to-cart and mobile menu views
  • Screenshots were shared showing the transparency issue

Status: The discussion remains open with the background transparency problem unresolved. The user’s last message appears incomplete (“Hel ?ol”).

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

Hi @robertbarta Add this code as well.

.header__active-menu-item {
    text-decoration: none !important; //Just add this line in the previous code which I have provided.
}

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

1 Like