Fixed elements move with top navigation bar on mobile

Question

I'm having an issue with my sites mobile navigation bar being scrolled past the view-able area when the browsers navigation bar is showing. I've tried a few things to fix it, however I cannot seem to get it working properly.

Before scroll down:

After scroll down:

Excerpt of my SCSS relating to the nav bar:

nav {
    display: flex;
    flex-direction: column;
    float: left;
    background-color: #3a3e4b;
    height: 100%;
    width: 100px;
    position: fixed;
}

// body also switches flex direction to put the nav bar at the bottom.
@media only screen and (max-width: 720px) {
    nav {
        flex-direction: row;
        height: 70px;
        width: 100%;
    }
}

Full SCSS available here: https://github.com/CorruptComputer/CorruptComputer.GitHub.io/blob/master/assets/css/main.scss

I looked through these but neither of them seemed to help:

• Issue when resizing top navigation bar on mobile
• How to create a sticky navigation bar that becomes fixed to the top after scrolling

Answer 1

This is an issue related to google chrome, that you will have to find a work around for.

When the chrome mobile top address bar appears, it pushes the page downwards and because of that you get this issue. By scrolling the page, the top address bar will disappear.

Try this Javascript code, you can use it as a function or just as a single line on top of your Javascript file.

scrollOnLoad();

function scrollOnLoad() {
   window.scrollBy(0, 1);
}

Or

  window.scrollBy(0, 1);

Answer 2

you can try to set:

body{
   height: 100vh; //instead of 100%