Sticky navbar not working on iphone

  • Author
  • #139517

    Hi Ben,

    So i am using the navbar with position:sticky and it seems to work like a charm for my chrome , safari and even my one plus phone. However, when i test the same it doesnt stick to the top like its supposed to.
    Strangely, on the same phone my project highlights page custom made menu sticks to the top. What have I screwed up? Just cant figure.

    The blog I need help with is


    Theme Author

    Where is it not working?

    It’s working fine on my laptop and pixel phone.

    It does depend what browser you are using – position: sticky doesn’t work on all devices.


    so It wasnt working on my laptop’s safari and I googled to finally use -webkit-sticky and it worked.

    However, its not working on ipad and iphone.
    Its working on my One plus though, so really dont know whats going on.

    The weird thing is, that I created a custom bar on my project highlights page and it seems to work there with sticky. So I really dont know what the root cause is..

    Please Help Me!


    Theme Author

    I’ve been looking in to this but I’m afraid I can’t work out why it’s working in some situations and not in others.

    Adding the -webkit prefix is needed for some css rules that aren’t 100% formalized, so it’s worth doing.

    According to caniuse it should work fine on ios.

    The bar on the project highlights page is using position: fixed rather than sticky, which has a slightly different behaviour.

    So I’m not sure how to help at the moment I’m afraid. It’s not a rule I have much familiarity with so I’m not aware of its bugs or shortcomings. Sorry :(

The topic ‘Sticky navbar not working on iphone’ is closed to new replies.