Header Glitchy in Safari

[tkcostello]

The header on a client website is glitchy in Safari desktop only — when you scroll down and then all the way back up the navigation menu is below the header. I have disabled all plugin-ins and the problem persists. I have made sure everything is updated and tried viewing in a private browser to avoid any cache issues.

I have noticed that there have been sticky header issues in Safari in the past and that we have been waiting for updates. Is this a related issue and has there been updates on a fix as those posts are over a year old.

Please see the video in the secure note along with login details if needed. Thank you!

[christian]

Hey @tkcostello,

This is a known issue but luckily for your case, there’s a potential solution. It looks like Safari does not like the Relative Positioned Bar to change to Position Fixed when it sticks then back to Position Relative when you go to the top of the window. The following code added to your Sticky Bar ensures the Bar is Sticky all the time.

$el {
  position: fixed;
  top: 0;
  width: 100%;
}

That might be the optimum solution but that works.

Hope that helps.