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:
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)
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>  </a>
<a href="#close" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()"><span style="font-size:40px">×</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");
}
}