Narrative theme - header glitch / bug

[DTS1]

Hello community!

This issue has perplexed me! Using the Narrative theme - if you disable "Enable transparent header on the home page" function in order to have your header a solid block - it introduces a skip / jump / resizing issue on mobile devices when scrolling down / up. This only occurs on the homepage.

I am using an iPhone 8 Plus if that matters (with the latest OS). A video of the glitch can be seen here: https://youtu.be/H35DUPygGCw

If anyone has a solution - it would be much appreciated!

[deej1221]

Having Same issue any help would be appreciated! It also happens on PC and just on the home page for all devices.

[JosephL]

I have the same problem! Have you found a solution yet?

[47985924]

I have the same issue. Has anyone figured out how to resolve this issue?

[WraptorTeeth]

My workaround was to actually enable the transparent header then go to the theme.scss.liquid file and change the background color to the color of the regular non-transparent header and remove the transparency.

For my solid white header, I added this at the very bottom of the theme.scss.liquid file (keep all your edits at the bottom so that you don't mess with the original code).

.site-header--transparent .site-header__wrapper {
background-color: rgba(255,255,255,1);
}

[47985924]

Thanks! I resolved this by submit the request to Shopify support team. Their eng fixed this very quickly. Not sure if they also updated to their theme store too