Seperator line on header only showing while scrolling

silenceclothing · ‎01-08-2025

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

Dan-From-Ryviu · ‎01-09-2025

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

<style>
html .header-wrapper--border-bottom { border-bottom: unset !important; }
html .scrolled-past-header .header-wrapper--border-bottom { 
    border-bottom: .1rem solid #dddd !important;
}
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

DaisyVo · ‎01-08-2025

Hi @silenceclothing

To complete your requests, please follow these steps:

Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Dan-From-Ryviu · ‎01-08-2025

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

silenceclothing · ‎01-09-2025

Where do i put this code ?

Dan-From-Ryviu · ‎01-09-2025

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

silenceclothing · ‎01-09-2025

it did not work.

Dan-From-Ryviu · ‎01-09-2025

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

<style>
html .header-wrapper--border-bottom { border-bottom: unset !important; }
html .scrolled-past-header .header-wrapper--border-bottom { 
    border-bottom: .1rem solid #dddd !important;
}
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GTLOfficial · ‎01-09-2025

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

silenceclothing · ‎01-09-2025

i only want it to show when scrolling

silenceclothing · ‎01-09-2025

thanks. It works now!

Seperator line on header only showing while scrolling

Seperator line on header only showing while scrolling

Community Blog Articles