Streaming live at 10am (PST)

Sticky nav bar doesn't stick in IRL

Hi helpful friends,
I’ve made a sticky navbar at the top of my site; it works on desktop and the other layouts work when I preview, but it doesn’t stay at the top of my screen on my actual phone…
Here’s a video showing my webflow setup:

Here’s me showing it on my phone:

thoughts?


Here is my site Read-Only: https://preview.webflow.com/preview/kac?utm_medium=preview_link&utm_source=dashboard&utm_content=kac&preview=9c2a6abd76b6307ee23df8bfdf20c60f&mode=preview

Hello @Tanya_Sillitti,

Why are you using sticky instead of fixed on the top? I think that is why your navbar is not sticking to the body in your mobile. I made a quick video about setting your navbar to position fixed. https://www.loom.com/share/e26047304c3c4eecbdbc23edeca136b3. Let me know if it works.

Thank you. So now it seems the nav is centering on a wider breakpoint than the phone screen… the nav is sticky when I zoom all the way out to whatever that breakpoint seems to be, but not sticky when zoomed in. see video:

Thanks so much for the help!

Hey @Tanya_Sillitti,

You have a layout problem on your site that is giving your entire site some extra room on the right side, that is why your site is side moving and why your navbar is longer than the window size. I look around and the problem is on your symptoms div block, there are a lot of elements there that are pushing the whole site to one side.
Screen Shot 2020-06-08 at 7.17.40 PM
you might have to rebuild your symptoms div to fit your original design. One advice I’d give you is to use grid for complicated layouts like this one. Fix that and that should fix all your navbar issues. Let me know how it goes, or if you have any more questions.

1 Like