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:
https://www.loom.com/share/69f1a59aa98345878d1d71aee987d101
Here’s me showing it on my phone:
https://www.loom.com/share/f600e64bc2f846babefe6b54fc1b72de
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. Loom | Free Screen & Video Recording Software | Loom. 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:
https://www.loom.com/share/8cb4340e24674bc4b92f89e293ad8819
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.
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