Hi everyone,
I have a problem with the position of the navbar when scrolling. The issue only occurs on mobile devices running Android Chrome. The navbar loses its position which should always be at the bottom.
I recorded a little video to show
Something help? Thank you!
Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)
I believe you could fix it by changing the position of the element to “fixed” and positioning it to the bottom of your page so 0% on the bottom.
Thank you Brice,
The problem is that if I change to fixed, the “contact” div at the bottom of the scroll down, it would not work well.
Oh yes I see, well it looks like your navbar is on top of your Footer dark element so you could change the footer dark’s positioning to relative and put your navbar inside that footer and change it’s positioning to absolute.
Your navbar’s position would then be relative to your footer and you could position it on top of the footer and set the top positioning to minus the value of the height of the footer so for example if your footer is 50px or 10vw in height you would set the top positioning to -50px or -10vw .
And at the same time you can also set the bottom position of your footer to 0%.
Unfortunately your elements are in components so you would have to copy them first so they’re not longer part of a component to be able to put the navbar inside the footer dark
Thank you very much Brice, but it didn’t work.
It’s frustrating that it works fine on safari Iphones, chrome desktop, samsung nav, but on chrome android not.
I think it has to do with the chrome browser, when you start to scroll, this browser disappears upwards and that’s when my nav bar scrolls up, I would say the same space that the Chrome navigation bar occupied.
I finally found a solution:
…but without any code, just insert a transparent div with fixed position inside my nav bar and everything works fine now.