How can I fix the header background scrolling issue on my website?

Store Design
, ,

Topic summary

Main issue: Header background behaves inconsistently—transparent on the home page, white on other pages; when scrolling from bottom to top, the header appearance breaks. Screenshots were shared to illustrate the visual bug.

Context: Store preview provided (misajewels.com, password: jewelsmisa) for troubleshooting.

Proposed fixes:

  • CSS (attempt 1): Add to stylesheet.css
    .header-wrapper * { background: white !important; }
  • Liquid (attempt 2): Add a conditional snippet after the tag in theme.liquid targeting non-home templates ({% if template != ‘index’ %}{% endif %}); OP reported this did not work.
  • CSS (latest attempt): Add to base.css
    .header-wrapper { background: white !important; }

Current status: No confirmation that any fix resolved the issue. The latest guidance suggests targeting the header container directly in base.css and offers further testing if needed. Discussion remains open pending OP’s feedback or additional diagnostics.

Summarized with AI on January 12. AI used: gpt-5.
1

For home page my header is transparent but for other pages it has white background which looks like given image:

Screenshot 2023-11-27 at 9.00.21 AM.png
Screenshot 2023-11-27 at 9.00.21 AM.png2880×384 25.5 KB

But on scrolling from bottom to top the header looks like this:

Screenshot 2023-11-27 at 9.00.12 AM.png
Screenshot 2023-11-27 at 9.00.12 AM.png2880×338 49.5 KB

How should i fix this?

2

Hi @obito_uchiha01

Please share your store link to check

3

link - https://misajewels.com/
password - jewelsmisa

4

Hi @obito_uchiha01

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file stylesheet.css

Step 3: Paste the below code at bottom of the file → Save

.header-wrapper * {

background: white !important;

}

In case the above code doesn’t work, can you send me the page URL so I can test it more carefully?

Hope that my solution works for you.

Best regards,

Henry | PageFly

5

Please add this code to your theme.liquid file after tag in Online store > Themes > Edit code

{% if template != 'index' %}

{% endif %}
6

it’s not working
link - https://misajewels.com/
password - jewelsmisa

7

You can try again this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.header-wrapper {

background: white !important;

}