How can I make a transparent header that isn't sticky?

Store Design

Topic summary

A user created a transparent header using CSS but found it became sticky, and disabling the sticky option in the theme editor broke the transparency.

Solutions provided:

  • Remove the sticky header option from the theme editor
  • Replace the existing CSS with code that uses position: absolute instead of sticky positioning
  • Multiple contributors shared similar CSS snippets targeting .header-wrapper.color-background-1.gradient with position: absolute, left: 0, width: 100%, and background: transparent

Current status:

  • One solution successfully resolved the desktop transparency issue
  • A new problem emerged: on mobile devices, the h2 text appears positioned too high
  • The user attempted to fix the mobile spacing with media query CSS for padding and font size, but it didn’t work
  • The discussion remains open regarding the mobile layout issue
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I made a transparent header, but I don’t want it to be sticky. How do I disable this? When I do this in the editor, the transparency doesn’t work anymore.

I used the below code for the transparent header which I guess makes it a sticky header. Can I just use code for only the transparent bit?

sticky-header.header-wrapper.color-background-1.gradient {
     position: absolute;
     left: 0;
     width: 100%;
     background: transparent;
}

website

password: meifay

2

Hi @INFRA

First please remove sticky header
Then use this css

.header-wrapper.color-background-1.gradient {
     position: absolute;
     left: 0;
     width: 100%;
     background: transparent;
}

Remove sticky class from the code.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

3

Hi @INFRA

Please disable sticky option in your theme editor, remove code you added and then add this code to your theme.liquid file
4

Hello @INFRA ,

I have looked through your store https://top-squad-soccer-academy.myshopify.com and can assist you in resolving your issue.

Please follow the below mentioned steps for making the header non-sticky -:

Steps-:

  1. Go to Online Store → Themes-> Click Customise https://prnt.sc/qeo24Oc3D8z_

  2. Now, click on Header https://prnt.sc/0Qv_R2ABuM-h , then Header section option setting will appear, scroll down at the end and click custom css https://prnt.sc/Rp536rpbvvgM

  3. Next, add the below mentioned code in the this section https://prnt.sc/Z5c55s52eYkK

.header-wrapper.color-background-1.gradient {
position: relative;
left: 0;
width: 100%;
background: transparent;
}

  1. Save

Output = Header appear in store https://prnt.sc/wTcXJx5JvR5s , while we scroll down, it will not appear https://prnt.sc/X3L2AcHCKwZ6

I hope it helps.

Please let me know if you need any assistance.

Thank you.

5

hi @Anshul_arora this does not work, unfortunately. Is there another code that can be used?

Screenshot 2023-11-22 at 09.31.08.png
Screenshot 2023-11-22 at 09.31.08.png1228×278 129 KB

6

hi @Dan-From-Ryviu this worked, thank you! It’s just on mobile the h2 text is too high up.

I tried to use below code but it’s not working, is there anything else I can try?

@media (min-width: 768px) {
  h2 {
    font-size: 30px;
    padding-top: 100px;
  }
}
7

You already fixed. Awesome

1 Like
8

Here is the way to make it transparent but not sticky: