Header

Topic summary

Header scroll behavior troubleshooting and fix. The header remained sticky even with “Sticky header: none” in theme settings.

Key steps and findings:

  • Store URL shared. Theme setting change didn’t work because custom CSS forced stickiness: header { position: fixed !important; }.
  • Solution: remove the fixed positioning from the custom CSS. After updating the CSS, the header’s stickiness was resolved.
  • Side effect: header transparency was lost after the change.

Next actions and access:

  • Merchant saved changes and granted staff access to the helper via email to adjust transparency and help with video background, menu transparency, and featured product styling.

Additional input:

  • Another participant suggested adding CSS that fixes the header again, which contradicts the chosen approach and would reintroduce stickiness.

Latest update and status:

  • Helper reports fixes applied and asks to mark the solution; also offers further expert customization.
  • Outcome: core issue (unwanted sticky header) resolved; design refinements (transparent header/menu, featured product) are in progress. Code snippets and theme settings are central to the solution.
Summarized with AI on December 23. AI used: gpt-5.

Add This css in your edit code > base.css File

body.gradient #shopify-section-sections--18160314482937__header header.header.header--top-center.nonsticky {
    position: fixed;
}