I was able to reproduce it using browserstack. It only happened with IOS devices, no matter the browser. I was using a trial and you only get 30 minutes, plus it’s a bit janky to work with the dev tools, but here is what i found.
I had to use the -webkit prefix to make position sticky work.
The navs RGBA background-color was marked as invalid. I saw you weren’t using the alpha channel so i just went with RGB and it worked. I later realized the fact that you are missing the fourth argument to RGBA (the alpha part) might cause the property to become invalid on some devices/browsers. In any case, you’re not using the alpha so no need to use RGBA.
background-color: rgba(255,255,255); // Doesn't work
background-color: rgb(255,255,255); // Works
- Not entirely sure what is going on, but it kinda looks like a width issue causing the last .nav-item to wrap. The simplest solution i came up with was moving the .nav-item spacing from margin-left to margin-right, and then use the :not(:last-child) selector to skip the last .nav-item. You might need to make some more adjustments to make it look exactly like before.
/* margin-left: 1.5rem; */
Have you considered making a mobile nav?