Seperator line on header only showing while scrolling

[silenceclothing]

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

[DaisyVo]

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:

I hope this helps

Best,

Daisy

[Dan-From-Ryviu]

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);
}

[GTLOfficial]

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

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

[silenceclothing]

Where do i put this code ?

[Dan-From-Ryviu]

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

[silenceclothing]

it did not work.

[silenceclothing]

i only want it to show when scrolling

[Dan-From-Ryviu]

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

[silenceclothing]

thanks. It works now!