Remove border for transparent header - horizon theme

[ads18922]

hello, i want to remove the border line for my transparent header:

my store is: https://vg4z20vq80vtlw7y-90984481091.shopifypreview.com/ , theme is horizon

[Moeed]

Hey @ads18922

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.header__row {
    border-bottom: unset !important;
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[Manoj_j]

Hi @ads18922 ,
Add this in base.css

.header__row--top {
  border-bottom: none !important; /* removes any visible border */
  --border-bottom-width: 0px !important; /* overrides the inline variable */
  --border-bottom-width-mobile: 0px !important; /* overrides mobile variable */
}

Save and refresh preview.
Results on laptop view and mobile view.

Thanks
Manoj

[ads18922]

that removes the whole separator line altogether - i just want to remove it for the transparent header

[ads18922]

that removes the whole separator line altogether - i just want to remove it for the transparent header.

[Denishamakwana]

Please add below css at the bottom of assets/styles.css file

.header__row.header__row–top {

border-bottom: none;

}

Thank you.

[Huptech-Web]

Good day @ads18922 , If you would like to remove the bottom border from the header, please follow these steps:

1. Go to Online Store in your Shopify admin.

2. Click Edit Code, then open base.css (or your custom CSS file).

3. Paste the CSS code provided below into the file.

.header .header__row {
    border-bottom: 0;
}

I’ve also attached screenshots for your reference, so you can easily follow along.

If you have any questions or need further assistance, please don’t hesitate to ask.

If this solution helps you, please don’t forget to like and accept it.

Regards,
(S.P)

[tim_1]

In customizer, add a “Custom liquid” section to the homepage template.
Paste this code:

<style>
  [data-sticky-state="inactive"] .header__row {
    border-bottom: none;
  }
</style>

This way it will only apply on homepage and only when header is transparent at the top of the page.