Enhance Your Shopify Menu: Get That Underline Hover Effect (CSS Guide)

View original discussion by Captainsales8 on Shopify Community →

Hey everyone,

Ever notice how those little details on a website can make a huge difference in how professional and user-friendly it feels? One of those subtle but powerful touches is a good hover effect on your navigation menu. It's a small cue that tells your visitors, "Hey, this is clickable!"

We recently saw a great example of this in the Shopify community forums. Our friend Captainsales8 popped in with a straightforward but super common question: how do you get your menu text to underline when a cursor hovers over it? Specifically, they were looking for this effect on their store using the Horizon theme.

Moeed, a helpful community member, jumped in to clarify what Captainsales8 was looking for. Were they thinking of a color change, bold text, or a simple underline? This kind of clarification is key when you're working with code – 'highlight' can mean a lot of things! Captainsales8 quickly confirmed they wanted a 'normal underline' for their main menu items like Home, About Us, Catalog, and Contact. They even shared their store URL and password (which is always super helpful for getting specific advice, but remember to be cautious with sharing access!).

Turns out, adding this neat little touch is actually quite straightforward with a bit of CSS. Moeed provided a fantastic, clear solution that I want to walk you through. It’s a classic example of how a tiny bit of custom code can significantly improve your store's user experience without needing a fancy app or complex theme modifications.

Adding the Underline Hover Effect to Your Shopify Menu

Here’s the step-by-step process Moeed outlined, which is a solid approach for anyone looking to implement this on their Shopify store, especially if you're on a theme like Horizon.

  1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes.
  2. Edit Code: Find the theme you want to modify, click the Actions button, and then select Edit code.
  3. Locate theme.liquid: In the 'Layout' directory on the left sidebar, find and click on the theme.liquid file. This file is your theme's main layout template and is a great place to add small snippets of global CSS or JavaScript.
  4. Insert the CSS Snippet: Scroll all the way down to the bottom of the theme.liquid file. You're looking for the closing tag. Just above that tag, you'll want to paste the following code:

This little block of CSS does exactly what we want. It targets any element with the class .menu-list__list-item (which is what Shopify's Horizon theme uses for its main navigation links) and applies text-decoration: underline when you hover over it (that's what :hover does!). The !important flag is a CSS declaration that ensures this style overrides any other conflicting styles, making sure your underline actually shows up.

Moeed even shared a screenshot of the result, which really helps visualize the change:

Screenshot of menu items with underline on hover

Pretty neat, right? It's exactly what Captainsales8 was looking for!

A Few Expert Tips for Customizing Your Shopify Theme

While this specific solution works perfectly for the Horizon theme and the .menu-list__list-item class, here are a few things to keep in mind when you're diving into custom code: