Narrative theme - header glitch / bug

DTS1
Tourist
4 0 1

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!

 

0 Likes
deej1221
Tourist
8 1 0

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

0 Likes
JosephL
New Member
2 0 0

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

0 Likes
47985924
Tourist
10 0 4

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

0 Likes
WraptorTeeth
New Member
2 0 0

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);
}
0 Likes
47985924
Tourist
10 0 4

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

 

0 Likes