how do i make a non sticky transparent header

Shopify Discussion

Topic summary

A user is attempting to create a transparent header that remains static (non-sticky) on their Shopify store. They’ve implemented custom CSS code that successfully makes the header transparent, but it’s still sticking to the top when scrolling.

Current code approach:

  • Uses conditional logic for the index template
  • Sets header position to absolute with transparent background
  • Adds top margin to the header element

Suggested solutions:

  • One commenter recommends using the theme’s built-in “Enable sticky header” toggle and turning it off
  • Original poster notes this option isn’t available when using custom code

The issue remains unresolved, with the sticky behavior persisting despite the custom CSS implementation.

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

hi i am trying to make a transparent header that is not sticky, ive found a code that is working but its sticky.

  1. {% if template == ‘index’ %}

  4. .shopify-section-group-header-group.announcement-bar-section{

  5. height: 5px;

  6. }

  7. .header-wrapper{

  8. position: absolute;

  9. width: 100%;

  10. background: transparent;

  11. }

  12. .header-wrapper .header{

  13. margin-top: 20px;

  14. }

  17. {% endif %}

2

in most themes there is a button that says Enable sticky header. you just click that to off

3

not if you use codes