Jump to content

mgw

Members
  • Content Count

    2
  • Joined

  • Last visited

Community Reputation

0 Neutral

About mgw

  • Rank
    Newbie
  1. No 2. is fixed - it was a simple coding issue... gess it was too late...
  2. 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>&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"); } }
×
×
  • Create New...