Transparent header in Shopify, using GemPages

Shopify Discussion

Topic summary

A user is implementing a transparent header on their Shopify homepage using GemPages that transitions to white on scroll. The initial issue was that the header appeared white with white text by default, only showing transparency briefly during the scroll transition.

Original Code Approach:

  • Custom HTML/CSS added to GemPages
  • JavaScript to detect scroll and add class at 100px
  • Styling for transparent state and scrolled state

Solution Provided:
A support team member (DaisyVo) recommended adding CSS through Shopify’s Theme Settings > Custom CSS:

section#shopify-section-template--22799631515974__gp_section_539925064049492896 > section {
    margin-top: -64px;
}

Outcome:

  • The original poster confirmed the solution worked
  • A subsequent user reported the code isn’t working for them and generates a publish error

The discussion remains open with the new issue unresolved.

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

I’m trying to make a transparent header in my shopify homepage which becomes white on scroll. I’m using GemPages so I’ve tried adding custom HTML into the app.

Right now the code looks like this:

{% if template == ‘index’ %}

.section-header .header-wrapper { background: rgba(0, 0, 0, 0) !important; /* Full transparency */ background-image: none !important; } body .section-header.color-scheme-3 .header-wrapper { background-color: transparent !important; } .section-header .header__icon .svg-wrapper, .section-header header .header__menu-item span { color: #fff !important; } .section-header .header__heading-logo { filter: invert(1) !important; } .section-header .header-wrapper--border-bottom { border-bottom: none !important; /* Hide border when transparent */ } html .section-header.scrolled-past-header .header-wrapper { background-color: #fff !important; } html .section-header.scrolled-past-header .header__icon .svg-wrapper, html .section-header.scrolled-past-header header .header__menu-item span { color: #141414 !important; } html .section-header.scrolled-past-header .header__heading-logo { filter: invert(0) !important; } html .section-header.scrolled-past-header .header-wrapper--border-bottom { border-bottom: 1px solid #e0e0e0 !important; } #MainContent { margin-top: -66px; } @media (max-width: 749px) { .section-header .header__icon--menu .icon { color: #fff !important; } html .section-header.scrolled-past-header .header__icon--menu .icon { color: #141414 !important; } html #shopify-section-sections--22799632531782__header header { background-color: transparent !important; } html #MainContent { margin-top: -63px; } }

{% endif %}

The problem is that by some reason the header is still white with white text by deafult and then it transitions into white header with black text on scroll. In between the transition the header is transparent but just for a second or so. How can I fix it? The website is stridedrinks.com

2

Hi @stride

Could you please share the store link with us?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

3

Hi, it’s stridedrinks.com

4

Hi @stride

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

section#shopify-section-template--22799631515974__gp_section_539925064049492896 > section {
    margin-top: -64px;
}

image (15).png
image (15).png1312×774 126 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
5

It works! thank you so much :))

6

hi! This code isn’t working for me- it is giving me an error message saying that I cannot publish the page.