Banish That Pesky Thin Line: A Shopify Horizon Theme Header Fix from the Community

Hey everyone! As a Shopify migration expert who spends a lot of time diving into the community forums, I often see recurring themes (pun intended!) where small details can make a huge difference in a store's polished look. Recently, a thread popped up that perfectly illustrates this, and I wanted to share the insights with you all. It was titled "Horizon Theme: Remove Thin Border On Header?" and it tackled a subtle but annoying visual glitch.

The Mystery of the Vanishing (and Reappearing) Header Line

Our fellow store owner, Asa (username 3rdDay), kicked things off with a classic conundrum. They were using the Horizon theme and noticed a "thin white line below my header that I can't seem to get rid of." This kind of detail can drive you absolutely batty, especially when you're aiming for a perfectly clean aesthetic. Asa even shared an image to show exactly what they meant:

It's one of those things that once you see it, you can't unsee it, right? Asa clarified that it was particularly noticeable when scrolling down against a black background, which makes perfect sense. The contrast would highlight any imperfections.

The Community Rallies: Troubleshooting the Ghost Border

Immediately, other community members, Laza_Binaery and tim_1, jumped in to help. Their first request, quite rightly, was for a password to the storefront to inspect the issue directly. Asa quickly removed the password, allowing them to dig in. This collaborative spirit is what makes the Shopify community so powerful!

tim_1 started by checking a specific theme setting, asking Asa: "Asa, what do you have in this setting?" accompanied by an image:

Asa confirmed it was "set to 0," eliminating a common culprit. This is a great reminder that sometimes, the simplest settings can hide complex issues. It also shows the meticulous nature of debugging these visual quirks.

The Diagnosis: Sub-Pixel Rendering and the CSS Cure

After some further investigation, tim_1 cracked the case! He noted that he only saw the line "if I zoom in (ctrl-+)" and that "Header height becomes something like 66.396px – then white background is visible." Ah, the classic sub-pixel rendering issue! This happens when elements don't quite align perfectly to whole pixels, and browsers try to render them as best they can, sometimes leaving tiny gaps or fuzzy edges.

The solution, as often is the case with these visual nuances, was a simple but effective CSS tweak. Here's what tim_1 proposed:

.header__row {
  background: black;
}

And it worked like a charm! Asa quickly confirmed: "Thanks so much. That’s exactly it. Fixed ." The brilliance here is that by explicitly setting the background of the .header__row element to black, even if there were any tiny sub-pixel rendering discrepancies, the underlying background would match the header, making the "thin white line" completely disappear. No more visual distraction!

Here are the before and after images tim_1 shared, illustrating the fix:

How to Implement This CSS Fix on Your Shopify Store

If you're facing a similar issue with your Horizon theme header, here's how you can apply this custom CSS:

1. Duplicate Your Theme First: Seriously, always do this before making code changes. Go to "Online Store" > "Themes." Find your live Horizon theme, click "Actions," and select "Duplicate." This creates a backup you can revert to if anything goes wrong.
2. Access Theme Code: On your duplicated (or live, if you're confident) Horizon theme, click "Actions" again, then select "Edit code."
3. Locate Your CSS File: Look for a file named something like theme.liquid, base.css, theme.css, or a custom CSS file often found under the "Assets" folder (e.g., custom.css or theme.scss.liquid). The exact file might vary slightly depending on your theme's version or if you've done previous customizations. A good general spot for custom CSS is often at the very bottom of theme.liquid (inside tags) or in a dedicated CSS file.
4. Add the CSS Snippet: Paste the following code into your chosen CSS file. If you're adding it to theme.liquid, make sure it's wrapped in If you're adding it to a .css or .scss.liquid file, just paste the CSS directly without the