Sticky navbar after top // navbar menu animation

[mgw]

Hi. I could use some help with the sticky navbar:

I'm relying on the examples provided in w3schools and designed a webpage that has a picture at the top. The navbar is below the picture and is sticky. Issues:

1. Everything works somehow in fullscreen or a smaller window (about half the screen of FHD) however the navbar jumps to the top of the page when I start scrolling (overlaying the picture)
2. Opening the menu on a mobile device causes the screen suddenly to "become wider" and I need to scroll to the right to see the menu. The menu is defined within <div class=""w3-sidebar w3-bar-block w3-dark-grey w3-hide w3-top w3-animate-right"> and also contains a dropdown for language switching purposes.

Apparently I'm missing something?

Any hint appreciated. Txs -mgw

Navbar and menu HTML:

<!-- Navbar -->
<div>
  <div id="navbar" class="w3-bar w3-dark-grey w3-card w3-hover-opacity-off">
    <a class="w3-bar-item w3-button w3-padding-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Navigation"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large"><b>
    <span style="font-size:28px; font-variant:small-caps; color:#ddffff">title goes here</b></span><br><span style="font-size:21px">subtitle</span></a>    
  </div>
</div>
<!--- menu -->
<div id="navDemo" class="w3-sidebar w3-bar-block w3-dark-grey w3-hide w3-top w3-animate-right" style="margin-top:0px; max-width:200px; right:0">
  <a>&nbsp </a>
  <a href="#close" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()"><span style="font-size:40px">&times</span></a>
  <a href="#about" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ÜBER</a>
  <a href="#portfolio" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">PORTFOLIO</a>
  <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">KONTAKT</a>
  <a href="#erfahrung" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ERFAHRUNG</a>
         <div class="w3-dropdown-hover">
          <button class="w3-button fa fa-language fa-2x w3-padding-large"></button>
            <div class="w3-dropdown-content w3-bar-block w3-card-4">
                <a href="index.html" class="w3-bar-item w3-button w3-padding-large">DE</a>
                <a href="index-en.html" class="w3-bar-item w3-button w3-padding-large">EN</a>
            </div>
         </div>
</div>

Navbar style and scripts:

.navbar {
  overflow: hidden;
  background-color: #333;
}
.sticky {
  position: fixed;
  top: 0;
  padding: 0px;
  width: 100%;
}
---------------------------------------------
// Used to toggle the menu when clicking on the menu button
function myFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
// Sticky navbar
// When the user scrolls the page, execute navFunction 
window.onscroll = function() {navFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function navFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

 

[mgw]

No 2. is fixed - it was a simple coding issue... gess it was too late...