How to remove white spaces padding above header?

[withaudette]

As you can see from the image above, there are white spaces above the header, and it only happens if I were to scroll down of the page and scroll up again. I tried checking the padding but it doesn't work.

my website is www.audette.store (code: test)

[DeborahNapoleon]

Got it! The issue you’re describing sounds like it could be related to either the sticky header behavior or margins/padding applied to elements when scrolling.

Here’s how you can troubleshoot and potentially fix the white space above the header when scrolling up after scrolling down on your site.

---

🔧 Steps to Remove White Space Above Header

1. Inspect Sticky Header Logic

The white space could be related to the header’s sticky behavior. Many Shopify themes, including Dawn, implement a sticky header that’s hidden or adjusted once you scroll down. When you scroll back up, it may not restore its position properly or could cause a visual shift, resulting in the white space.

1. Open your Developer Tools in Chrome or any browser (right-click the page → Inspect or F12).

2. Find the header element (<header> or .header).

3. Look for a class like sticky, scrolled, or is-sticky that’s applied when scrolling.

4. This class might be adding margins/padding or shifting the header’s position.

---

2. Adjust the Header Styles

If you find that the issue is due to extra padding, margins, or a transformation effect, you can modify the header’s styles in your CSS.

1. Go to Online Store → Themes → Actions → Edit Code.

2. Open assets/base.css (or similar stylesheet file used by your theme).

3. Look for styles related to .header, .sticky-header, .header.is-sticky, or similar.

4. If you see padding or margin values being applied when the header becomes sticky, remove or adjust them.

For example:

/* Prevent extra margin/padding when sticky */
.header.is-sticky {
  padding-top: 0; /* or adjust this value */
  margin-top: 0; /* or adjust this value */
  transition: all 0.3s ease;
}

You can also try adding this:

/* Ensure no extra space above the header */
body {
  margin-top: 0;
}

---

3. Check for JavaScript Issues

Sometimes, the issue can be caused by JavaScript/jQuery scripts that dynamically add/removes classes or styles when scrolling.

• Look for any scrolling scripts or JavaScript files in your theme that might be manipulating the header’s position when you scroll. Often, these scripts add a padding-top or change the header’s position after scrolling.

If you're using a custom sticky header script or an app, ensure that it correctly adjusts the layout during scrolling.

---

4. Test and Debug

• Try disabling sticky header temporarily to see if the issue goes away. If it does, then the problem is likely with the sticky logic.

• If it’s related to padding or margins, try adjusting values as described above.

• If you're unable to identify the issue by inspecting the code, feel free to share the theme file or JavaScript causing the issue, and I can help guide you through it.

---

Let me know how it goes! If you need more specific help, feel free to share your theme file or any additional details about how the sticky header is behaving, and we can dive deeper into a fix.

[Laza_Binaery · Accepted solution]

Hi @withaudette 

Try to change this code in custom CSS from

@media screen and (min-width: 750px) {


    .shopify-section.shopify-section-group-header-group.shopify-section-header-sticky sticky-header.header-wrapper {
        padding-top: 1.5rem
    }
}

to

@media screen and (min-width: 750px) {


    .shopify-section.shopify-section-group-header-group.shopify-section-header-sticky sticky-header.header-wrapper {
        padding-top: 0
    }
}

There are two more rules in that media block but you just need to change that. It should help.

[tim]

My recommendation would be to add this rule to your custom.css:

body:not(.shopify-body-section-header-hidden) sticky-header {
  padding-top: 0 !important;
}