Navbar: logo (opacity ) change on scroll - images not congruent on mobile

[Christoph]

Hi everyone,

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!

---

Here is my public share link: Read-Only Link
(how to access public share link)

[Jonathan_Holden]

can you share the preview link please?

[Christoph]

@Jonathan_Holden It’s below. I changed it from “Link” to “Read-Only Link” to make it more obvious. Please let me know it it works for you.

[Jonathan_Holden]

hahaha… I’m used to seeing a great long URL there, not a nice neat link!
I changed the position to top right (for all views) and that seems to fix it.
Don’t ask me why!

[Christoph]

HA! I’m not going to ask but I’m going to say Thank You! It worked!

@ link: I nice example of how “neat” isn’t always the best UI solution. I didn’t want to look like such a newbie. Gonna make it ugly again next time so I don’t confuse people!