Horizon theme header border weird behaviour

miscast.it · April 20, 2026, 4:09am

Hi!

This is the scenario:

Header set set to dark color
Border thickness set to 0

Still the line border between the header and hero is visible

Also i found this weird behaviour on desktop:

Drag the browser window to activate the portrait view (to the point that menu labels are replaced by icons)
The line border disappears
Refresh the page
Drag the browser window back to landscape view

Now the line border reappears with an height of around 20px

With a refresh the line is back to it’s normal height

Question:
Is there a way to remove this weird bug?
Also on mobile the line border is visible no matter what.

Just want to get rid of this line on desktop and mobile!

tim_1 · April 20, 2026, 4:18am

Share a link to your store and a preview password if one is set.

There are several possible reasons you see this, so need to see the store to diagnose. Apps, custom code can affect this as well.
Theme version matters too.

Moeed · April 20, 2026, 4:23am

Hey @miscast.it

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

miscast.it · April 20, 2026, 6:46am

loudadv

miscast.it · April 20, 2026, 6:48am

pass:
loudadv

Horizon 3.5.1

tim_1 · April 20, 2026, 7:35am

Huh, this does look like a theme bug to me.

for … bug reports for Horizon, the best option is to either contact support directly or leave feedback as a review on the theme store listing page for the specific Horizon variant.

For your configuration you can fix it with the following code added to Theme Settings-> Custom CSS

#header-group {
  --top-row-height: var(--header-height);
}

Some explanation:

This --top-row-height CSS variable is set only once – here:

github.com/Shopify/horizon

layout/theme.liquid

main


      
          if (headerTopRow) {
            window.requestAnimationFrame(function () {
              document.body.style.setProperty('--top-row-height', `${headerTopRow.offsetHeight}px`);
            });
          }

It should be updated when window is resized and
there is a function which should update this variable, but it’s never called

github.com/Shopify/horizon

assets/utilities.js

main


      
          
            const hasImmediateSection = hasHeaderSection.nextElementSibling?.classList.contains('shopify-section');
          
            const shouldApplyOffset = !hasImmediateSection ? '1' : '0';
            document.body.style.setProperty('--transparent-header-offset-boolean', shouldApplyOffset);
          }
          
          /**
           * Initialize and maintain header height CSS variables.
           */
          function updateHeaderHeights() {
            const header = document.querySelector('header-component');
          
            // Early exit if no header - nothing to do
            if (!(header instanceof HTMLElement)) return;
          
            // Calculate initial heights
            const headerHeight = header.offsetHeight;
            const headerGroupHeight = calculateHeaderGroupHeight(header);
            const headerTopRow = /** @type {HTMLElement} | null */ (header.querySelector('.header__row--top'));

^{if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it}

Topic		Replies	Views
Horizon Theme: Remove Thin Border On Header? Technical Q&A design , css , shopify-themes , troubleshooting , shopify-theme	9	82	March 19, 2026
Remove border for transparent header - horizon theme Store Design design , header , troubleshooting	7	164	September 3, 2025
Help removing dividing line underneath header theme: Baseline Store Design header , customizations , landing-page , css	9	110	July 5, 2024
How to increase header size - horizon theme Shopify Discussion design , header , css , troubleshooting	2	117	November 6, 2025
Removing the thin white line above the header Store Design design	4	121	August 3, 2025

Horizon theme header border weird behaviour

Related topics