I'm in the process of creating a new website and I want the navbar to stay fixed at the top when scrolling. The issue is that on mobile devices, there is white space either at the top or bottom when scrolling. The problem arises because I have a side navigation menu that appears on the left side on mobile devices. This side menu does not move when scrolling, causing the top navbar to go under the side menu, resulting in an unattractive display.
If you're having trouble visualizing this issue, you can visit my website at
I've attempted solutions like:
overscroll-behavior: none;
However, this did not resolve the problem.
body {
height: 100%;
overflow: auto;
}
Similarly, this had no effect on the issue.
The navbar I'm using is based on Bootstrap 4, but I have not used the 'fixed-top' class to keep it in place; instead, I've used a custom class that functions similarly to 'fixed-top'.
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
My goal is to eliminate the white space on mobile devices.
Here are some screenshots taken on my iPhone 6 while scrolling:
Scrolling down: https://i.sstatic.net/X9QQw.png
Side navigation menu open: https://i.sstatic.net/szFOw.png
Scrolling with side navigation menu open: https://i.sstatic.net/YbTHL.png