grey line under header

Shopify Discussion
,

Topic summary

A Shopify store owner is trying to remove an unwanted grey line appearing below the header and above the cover image on their site (rituelle.store).

Solutions Proposed:

Three community members offered CSS-based fixes:

  • Option 1: Add custom CSS via <style> tag in theme.liquid file before the </body> tag to target the header border
  • Option 2: Add CSS rule .header-wrapper--border-bottom { border-bottom: 0 !important; } to the theme’s CSS file (base.css, style.css, or theme.css)
  • Option 3: Target both .header and .shopify-section-header classes, removing both border-bottom and box-shadow properties using !important declarations

All solutions involve accessing the theme code editor through Shopify Admin > Online Store > Themes > Edit Code.

New Issue:

After receiving help, the original poster reported a secondary problem: the hamburger menu icon is not displaying on mobile devices, requesting additional assistance for this issue.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

hello !

I am desperately trying to remove the grey line under ma header and cover image on my shopify website. I have try pretty much everything, can someone help me ? https://rituelle.store/ pw is neocla

3 Likes
2

Hey @nesriri92

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 tag

RESULT:

Moeed_0-1745944402443.png
Moeed_0-1745944402443.png1897Ă—265 8.57 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @nesriri92

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.header-wrapper--border-bottom {
    border-bottom: 0 !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Hello @nesriri92

I checked your Shopify store at rituelle.store using the password neocla, and I see the thin grey line under the header and above the main image. This is likely a border-bottom or a box-shadow on the header or a wrapper div.

Here’s the easiest way to remove it:
. From your Shopify Admin, go to:
Online Store > Themes > Customize (on your current theme)

  1. Click the three dots (···) in the top left > Edit code

  2. In the theme files, open:
    assets/base.css (or possibly theme.css, style.css, depending on your theme)

  3. At the very bottom of that file, add the following CSS:

.header, .shopify-section-header {
  border-bottom: none !important;
  box-shadow: none !important;
}
  1. Click Save, then refresh your live site.

What this does:
. Removes any border-bottom or box-shadow from the header and its wrapper (.shopify-section-header).

. The !important ensures it overrides any default styles.

Thank you :blush:

5

thank you so much for your help, I have another question, I don’t know why but my hamburger icon is not showing on mobile device :disappointed_face: , the url is : https://8m19ef-i7.myshopify.com/ could you maybe help me ?