Sticky header malfunctioning on mobile (vertical-view)

I’m having a problem with the sticky header malfunctioning on mobile vertical-view on a mobile site.

Initially it was working fine. I have the sticky header below a hero image (Lifestyle Pro header template).

Then, I made a change to the horizontal view and when I went back to the vertical view, the sticky header was broken. Instead of remaining at the top, when scrolling it would disappear right when it hit the top of the screen, also, at the moment that it vanishes, the elements just below the sticky header flicker & flash.

If I turn off the sticky, everything is fine, except I want the header sticky!

I turned off all other plugins and turned off the Godaddy CDN (no firewall) trying to resolve it, but none of that made any difference.

I then figured maybe there was a glitch with the header itself, so I created a whole new header from scratch (again starting from the Lifestyle Pro mobile template). It was again fine on mobile vertical view after my changes. Then I went and made my changes to mobile horizontal view and, when I finished those, I went back to vertical view and the sticky header malfunction had returned!

I do have the sticky position set to “top” and it’s the row that I’m setting as sticky. I’ve tried it on multiple devices, using both safari and chrome and it does the same thing everywhere — but the problem is only on mobile-vertical view (desktop, etc is fine). I tried changing the z-index for the row to 90 thinking maybe it was in the background, but that didn’t make any difference.

Pls Help!

Update:
I tried starting with a blank mobile header, instead of the Lifestyle Pro header, but it did the same thing as before.

Then, as a work-around, I ended up just putting the hero image in the header and then I put the sticky row nav-bar (that I wanted to have just below the hero) at the top of the webpage itself (rather than in the header) and it seems okay.

Although I do now have a very thin white line between them that I haven’t figured out how to eliminate yet. I may eventually try eliminating the header all together, but for now I’ve already spent way too much time on this.

• This reply was modified 5 years by Chris-123.