I have my navbar set to sticky. The logo is supposed to change from one version to another via an opacity interaction on scroll. Which it does just fine.
My issue is that I have the two versions of the logos sit on top of one another in the navbar link box. The “original” logo is set to relative, the alternative logo is absolute and covers the original (z-index 1).
The two versions are perfectly congruent in the desktop and tablet versions. In the mobile versions, they are somewhat displaced (see screenshots) – and I can’t figure out why.
Thanks for taking a look!