Horizon theme menu item highlight

Store Design
, , , ,

Topic summary

A user wants to style a specific menu item (“The Hover Tee”) in the Horizon theme with a pill-shaped highlight that appears in normal, hover, and selected states.

Solutions Proposed:

  • Liquid + CSS approach: Add a conditional class in the theme’s Liquid template to target the menu item, then style it with custom CSS
  • CSS-only approach: Insert CSS targeting the menu link by its URL slug (href*="the-hover-tee") into the base.css file, applying:
    • Black background with white text
    • Rounded borders (pill shape)
    • Padding and font weight adjustments
    • Consistent styling across normal, hover, focus, and active states

Current Status:

The user reported that the CSS-only solution is not working. The discussion remains open with no confirmed resolution or follow-up troubleshooting steps provided yet.

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

I’m using the Horizon theme for my website. I want to highlight the only menu item named “The Hover Tee” like a pill shape same in hover, selected and in normal too. I’ll attach the reference.

website: https://qa6achapmlfbluek-70858047625.shopifypreview.com

password: staple

image
image1464×385 70.3 KB

2

@Sivadarshan

There are multiple way to achieve this, one of the way is below.

{% if link.title contains 'The Hover Tee' %}
        hightlight-menu
      {% endif %}

The use .hightlight-menu to add background to the menu.

Thanks

3

Hello @Sivadarshan

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end

nav a[href*=“the-hover-tee”],
.header__menu a[href*=“the-hover-tee”] {
background-color: #000;
color: #fff !important;
padding: 6px 14px;
border-radius: 9999px;
font-weight: 500;
display: inline-block;
transition: background-color 0.3s ease;
}

nav a[href*=“the-hover-tee”]:hover,
nav a[href*=“the-hover-tee”]:focus,
nav a[href*=“the-hover-tee”].is-active,
.header__menu a[href*=“the-hover-tee”]:hover,
.header__menu a[href*=“the-hover-tee”].is-active {
background-color: #000;
color: #fff !important;
}

4

@devcoders not working

1 Like