Remove white line from the header

Topic summary

A Shopify store owner encountered an unwanted white line appearing above their transparent header. They provided a screenshot and store URL showing the issue.

Solutions Offered:

  • Option 1: Modify the base.css file by replacing code for .page-width--full-width to remove padding
  • Option 2: Add custom CSS to theme.liquid file before the </body> tag, targeting .page-width--full-width padding and adjusting .slideshow__box positioning

The original poster confirmed that Option 2 successfully resolved their issue.

Ongoing Issues:

Two other users reported experiencing the same problem with different themes (Venue and Feather), where the suggested solutions did not work. The Feather theme user provided a screenshot showing their specific white line issue. These cases remain unresolved, suggesting the fix may be theme-specific.

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

Hello everyone, I hope you are all doing well.
I created a new store and added a transparent header, however I am getting a white line above the header. (Screenshot attached) . If anyone knows how to remove it, please let me know. You can also provide codes. It would be greatly appreciated if you could help.
Store URL: https://www.nairobiharvest.com

Hello! @Digital_Imran Please follow these steps to replace this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your base.css file.
  5. replace the following code
.page-width--full-width {
    max-width: 100%;
    padding: 0 !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K

1 Like

Hello @Digital_Imran

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px) { .slideshow__box { top: 32px; } } .page-width.page-width--full-width { padding: 0 !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like

Thank you so much @niraj_patel it works :grinning_face_with_smiling_eyes:

Thank you @Huptech-Web let me try

Hi! I’m having the same problem and tried this solution but it doesn’t work. I’m using the Venue theme. Please help!

Im having the same problem with the Feather Theme - none of the suggestions I’ve found fixed it