How to hide the bleeding in header when we scroll it shows all the content

Store Design
, , , , ,

Topic summary

A user is experiencing a visual issue where header content becomes visible (“bleeds through”) when scrolling the website. They’ve provided a screenshot showing the problem.

Proposed Solution:

  • Navigate to: Online Store → Theme → Edit code
  • Open the base.css file
  • Add the following CSS at the bottom:
.sticky-header {
  margin-top: -1px !important;
}

This negative margin adjustment should hide the bleeding effect by slightly repositioning the sticky header element. The discussion appears to be awaiting confirmation on whether this solution resolves the issue.

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

Hi, I recently got an issue in header that there is some small bleeding where all the contents are visible when scrolling the website. I want to hide it.

I’ll attach the image and website link for your reference.

Screenshot 2024-09-16 100832.png
Screenshot 2024-09-16 100832.png790×112 3.71 KB

www.bazzoit.com

Thanks in advance

2

Hello @Sivadarshan ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

sticky-header {
    margin-top: -1px !important;
}

Thanks