Seperator line on header only showing while scrolling

Store Design
, ,

Topic summary

A user wants to display a separator line under their Shopify store header only when scrolling, not when the page is at the top.

Solutions Provided:

Multiple CSS-based solutions were offered:

  • Adding CSS to target the sticky header with a border
  • Using .scrolled-past-header class to conditionally show the border
  • Modifying base.css with specific color scheme classes

Resolution:

The issue was initially unresolved when CSS was added to the Custom CSS section in Theme Settings. The working solution required adding code to the theme.liquid file after the <head> tag, rather than just the Custom CSS area. The user confirmed this approach successfully implemented the scrolling-triggered separator line.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Skjermbilde 2025-01-09 kl. 00.25.02.png
Skjermbilde 2025-01-09 kl. 00.25.02.png2920×464 63.5 KB

Skjermbilde 2025-01-09 kl. 00.24.53.png
Skjermbilde 2025-01-09 kl. 00.24.53.png2934×988 277 KB

Hello. I only want to show the separator line under the header when scrolling. Does anyone know how to do this?

2

Hi @silenceclothing

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
sticky-header.header-wrapper {
    border-bottom: 2px solid white !important;
}

Here is the result:

image_720.png
image_720.png720×296 34.9 KB

I hope this helps

Best,

Daisy

3

Hi @silenceclothing

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to do that

html .header-wrapper--border-bottom { border-bottom: unset; }
html .scrolled-past-header .header-wrapper--border-bottom { 
    border-bottom: .1rem solid rgba(var(--color-foreground), .08);
}
4

Hello @silenceclothing

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.header-wrapper.color-scheme-95fafa66-77d0-4a87-811c-eeb7bed11590.gradient.header-wrapper--border-bottom {
border-bottom: 1px solid white;
}

result

127.png
127.png1418×378 273 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Where do i put this code ?

6

Go to your store admin > Sales Channels > Online Store > Themes > Customize > Theme settings > Custom CSS

7

it did not work.

8

i only want it to show when scrolling

9

So please add code to theme.liquid file, after and check again
10

thanks. It works now!