Prestige Theme - Remove grey line under header

Topic summary

A user seeks to remove a grey (or faint beige) line appearing under the header in the Prestige theme. Previous CSS solutions found on the site either had no effect or broke page layout.

Attempted Solutions:

  • Initial CSS targeting .shopify-section--bordered with display: none failed
  • Code snippet using .Header { box-shadow: none !important; } in assets/theme.css did not work
  • Replacing hex color values with ‘none’ was unsuccessful

Working Solution:
Pasting the following CSS at the top of the theme.scss file successfully removed the line on desktop:

#section-header {
  box-shadow: none !important;
}

Current Status:
Resolved for desktop version. A follow-up question asks whether this solution also works for mobile, as the line persists on mobile devices for another user with the same issue.

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

Hello! There have been a few people asking this same question, but every piece of code I have found on this site doesn’t have any effect or scrambles the content in the body of the page.
Any ideas as to how I can remove the grey line under the header, as seen below?

I’ve tried the below code already - no success :disappointed_face:

/* css for remove border */
.shopify-section–bordered {
display:none;
}

1 Like

@ava06

Please share store URL.

1 Like

Thank you @dmwwebartisan
It’s https://chloeandclaude.com but its not live yet :disappointed_face:

hello @ava06

can you please share your unpublished shop preview url

2 Likes

https://4id9gfifb93bw7ow-40983593121.shopifypreview.com

Thank you both! Sorry bit slow with how this works.

It’s currently a faint beige line, but if I change to a darker colour it’s more noticeable.
Thanks again for looking into it.

hello @ava06

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.Header {
   box-shadow: none  !important;
}
2 Likes

Thank you! @Kinjaldavra
I entered the your code snippet, but it refreshed with the line still. I could see you have a hex colour in the code, I tried replacing it with ‘none’ and the line is still there. Could it have anything to do with the code directly above it?

@ava06

you must remove the text “the line under the bar”. Written text will break CSS code.

Kind regards,
Diego

1 Like

hii, @ava06
Paste this code on top of the theme.scss file.

header#section-header {
    box-shadow: none !important;
}

Thank You.

2 Likes

Thanks Diego! Done that, but it’s still there :disappointed_face:

hello @ava06

Paste this code on top of the theme.scss file.

.Header {
   box-shadow: none  !important;
}
2 Likes

@Zworthkey That worked. Amazing! Thank you very much.

Thanks to everyone else for your help also :slightly_smiling_face:

2 Likes

@ava06
Welcome!

1 Like

hello I have the same issue, this code removed it from desktop version but the mobile one. can. you help?