Hi,
I am needing help with my website. I have already made the header transparent when landing on website, and I want to hide the header menu until the person scrolls down. Please reachout with any questions.
Topic summary
Goal: On the Dawn theme, keep the header transparent and hide the header menu on initial page load, then show it only after the user scrolls.
Context and steps taken:
- The store URL was shared (happyorbs.com) for troubleshooting.
- A helper suggested editing theme.liquid (Online Store > Themes > Edit code) and pasting code just before .
- The actual code snippet is missing in the thread (empty code block), and a result image was shared.
Current outcome:
- The suggested change did not achieve the goal. The menu remains visible on page load and then disappears on scroll, which is the opposite of the desired behavior.
Key notes:
- The missing code and screenshots are central to understanding and replicating the fix; their absence limits verification.
Status and next steps:
- Unresolved. Needs a corrected approach (likely CSS/JS) that hides the header/menu on initial load and toggles it to visible after a scroll event.
- Further guidance or a working code snippet is required; additional details from the theme setup may help.
1 Like
Hi @HappyOrbs
Would you mind to share your store URL website? with password if its protected. Thanks!
Hey @HappyOrbs Can you please share your store URL with a password if there is one?
So I can help you out.
1 Like
Thank you for the information. Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- Open the “theme.liquid” paste below code on the very before the this tag
- And Save.
- Result:
i hope it help.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
This did not help. The main menu is still there on top, and disappears on scroll down and I dont want it to do that.