Dawn theme header is not being sticky

[Sivadarshan]

I’m using the Dawn theme because I want the mobile header to be sticky. When I open the mobile hamburger menu, the page scrolls to the bottom. Can someone help me fix this?

Website: https://ambersilverz.myshopify.com/
Password: amber

[Fayyaz_Ahmed]

You can fix this by overriding the menu drawer CSS and JS behavior. Try adding this snippet in your theme.css (or base.css):

/* Prevent page scroll jump when opening mobile menu */
.menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

And in theme.liquid or header-drawer.js, ensure scroll locking doesn’t force a jump. Add:

document.addEventListener('DOMContentLoaded', function() {
  const menuDrawer = document.querySelector('.menu-drawer')
  if (menuDrawer) {
    menuDrawer.addEventListener('transitionend', () => {
      window.scrollTo(0,0)
    })
  }
})

1. The header stays sticky.
2. When you open the hamburger menu, it slides out smoothly without pushing the page down.
3. User experience feels seamless.

[Sivadarshan]

@Fayyaz_Ahmed where to place the below js code, under which tag

[Fayyaz_Ahmed]

Hi Sivadarshan,

Good question. You can add that JS snippet in one of two safe places:

Option 1 – Directly in theme.liquid

1. Go to Online Store > Themes > Edit code

2. Open layout/theme.liquid

3. Scroll to the bottom, just before the closing </body> tag

4. Paste the script:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuDrawer = document.querySelector('.menu-drawer')
    if (menuDrawer) {
      menuDrawer.addEventListener('transitionend', () => {
        window.scrollTo(0,0)
      })
    }
  })
</script>

Option 2 – Inside header-drawer.js

• If you prefer to keep everything in JS files, open assets/header-drawer.js

• Paste the code at the bottom of that file.

• Save and publish.

---

[Sivadarshan]

Sorry it’s not working, can you please help with me