title: White space on top and bottom when scrolling on mobile
body: <p>I'm making a new website where I want my navbar fixed top when scrolling. It works, but on mobile there is white space on top or bottom when we scroll. The problem is than I have a nav coming from left side on mobile. This nav doesn't moove when I scroll, no the top navbar go under the left navbar and its really ugly. </p>
  
  <p>Here is my website if you don't understand <a href="https://www.hytalefrance.net" rel="nofollow noreferrer">https://www.hytalefrance.net</a> </p>
  
  <p>I've tried something like this:</p>
  
  <pre><code>overscroll-behavior: none;
  </code></pre>
  
  <p>But It change nothing</p>
  
  <pre><code>body {
    height: 100%;
    overflow: auto;
  }
  </code></pre>
  
  <p>Do nothing to</p>
  
  <p>It's a classic bootstrap 4 navbar, but I don't use fixed-top class to make it fixed, it's a custom class similar to fixed-top</p>
  
  <pre><code>.sticky.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
  
  }
  </code></pre>
  
  <p>I would like the whitespace on mobile disappears.</p>
  
  <p>Some screenshot taken on my mobile (iPhone 6)</p>
  
  <p>I'm actually scrolling down:
  <a href="https://i.stack.imgur.com/X9QQw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9QQw.png" alt="I&#39;m actually scrolling down"></a></p>
  
  <p>When nav is open:</p>
  
  <p><a href="https://i.stack.imgur.com/szFOw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/szFOw.png" alt="When nav is open"></a></p>
  
  <p>When I scroll with nav open:
  <a href="https://i.stack.imgur.com/YbTHL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YbTHL.png" alt="When I scroll with nav open"></a></p>