Banish Those Pesky Grey Lines: A Quick Fix for Your Shopify Horizon Mobile Menu

Hey fellow store owners!

Ever been there? You're scrolling through your beautiful Shopify store on your phone, everything looks great, but then you tap that little burger menu icon, and BAM! There are these random, annoying grey lines showing up on your mobile menu items. It's a small detail, but it just gnaws at you, right? Especially when you know it's not supposed to be there, and it certainly doesn't appear on desktop.

This is exactly what hannahoreilly1 ran into recently in the Shopify Community forums with her store using the Shopify Horizon theme. She shared a screenshot, and I swear, it's a frustration many of us have faced:

Hannah mentioned she'd tried a few CSS additions, but nothing was working. That's a classic sign that the default styling is a bit stubborn, often due to specific CSS selectors or the use of !important in the theme's core files. The good news? The Shopify community is a treasure trove of helpful experts!

The Community to the Rescue: A Simple CSS Fix

While a couple of other helpful members, suyash1 and devcoders, offered to take a look if Hannah shared her store URL, it was Ploqo who swooped in with a direct, elegant solution that worked like a charm. This is why I love our community – someone always has that specific insight!

Ploqo identified that these grey lines were likely coming from default borders or even pseudo-elements (like ::before or ::after) that the Horizon theme might be using for styling its menu items, but only applying in the mobile view. The solution is to override these styles with a simple block of Custom CSS. Hannah confirmed it was a "Perfect solution!"

Here's a visual of the "before" and "after" of the fix, thanks to Ploqo's helpful screenshots:

How to Banish Those Grey Lines from Your Horizon Mobile Menu

This fix is surprisingly straightforward, even if you're not a coding wizard. You'll be adding a small snippet of CSS to your theme's Custom CSS section. Here are the step-by-step instructions:

1. Open Your Theme Editor: From your Shopify admin, go to Online Store > Themes.
2. Next to your Horizon theme, click Edit theme.

3. Access Theme Settings: In the editor, click the gear icon (Theme settings) in the bottom-left corner.

4. Navigate to Custom CSS: Near the bottom of that list, click Custom CSS.

5. Paste the CSS Code: Click after the last line already in the box, hit Enter, then paste the following code:

.menu-drawer__menu-item::before,
.menu-drawer__menu-item::after,
.menu-drawer__menu-item-text::before,
.menu-drawer__menu-item-text::after,
.menu-drawer__list-item::before,
.menu-drawer__list-item::after {
  content: none !important;
  display: none !important;
}

.menu-drawer__menu-item,
.menu-drawer__menu-item-text {
  border: 0 !important;
}

6. Save Your Changes: Click Save in the top right corner.

What Does This CSS Do?

Let's break down that code snippet quickly so you understand what's happening:

• .menu-drawer__menu-item::before, .menu-drawer__menu-item::after, ... { content: none !important; display: none !important; }: This part targets various elements and their pseudo-elements within your mobile menu. Pseudo-elements (::before and ::after) are often used for decorative purposes, like adding icons, lines, or other visual flair. By setting their content and display properties to none !important, we're essentially telling the browser, "Hey, don't show these at all, no matter what other styles say!"
• .menu-drawer__menu-item, .menu-drawer__menu-item-text { border: 0 !important; }: This second part specifically targets the menu item and its text, removing any borders that might be causing those grey lines. Again, the !important tag ensures our custom rule takes precedence over any conflicting theme styles.

The beauty of this solution is that it's highly targeted. It only affects the mobile menu elements (specifically the .menu-drawer classes) and leaves your desktop menu completely untouched. So, you get a clean mobile experience without messing up your main navigation.

Once you've saved, clear your phone's browser cache (or open an incognito tab) and check your mobile menu. Those pesky grey lines should be gone, leaving you with a clean, professional-looking navigation. It's these small, polished details that really elevate the user experience on your store. Don't let little visual glitches hold you back!

Big thanks to Ploqo and the entire Shopify Community for always sharing such valuable insights and helping store owners like us keep our shops looking sharp. Happy customizing!