jbenham10

Hey! Having a bit of trouble getting a sticky navbar to work for a website I have to build for my college course... I have copied the JavaScript from the W3Schools method assuming it would apply directly to my pre-existing navbar but it seems not...I can't seem to see where I am going wrong, any ideas? I tried using both the 'nav' and 'navbar' elements in the scripting.. Thanks in advance HTML <nav> <ul class="navbar"> <li class="navitem"><a href="">Home</a></li> <li class="navitem"><a href="">About</a></li> <li class="navitem"><a href="">Our Team</a></li> <li class="navitem"><a href="">Products</a></li> <li class="navitem"><a href="">Gallery/Portfolio</a></li> <li class="navitem"><a href="">Contact</a></li> </ul> </nav> CSS /* Navbar css*/ nav { float: left; display: block; width: 100%; left: 0; right: 0; top: 150px; background: #616A6B; height: 100px; } .navbar { list-style-type: none; max-width: 100%; text-align: center; overflow: hidden; position: static; padding-top: 25px; } .navitem { display: inline; padding-left: 10px; } .navitem a { text-decoration: none; font-size: 18px; color: white; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } .navitem a:hover{ color: #CC0000; transition-duration: 0.8s; } .sticky { position: fixed; top: 0; width: 100%; } JavaScript <script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script>

Just to bump this up and add that I have now nearly successfully solved the original issue in that I have managed to get the function working, however I now have the issue that the dropdown menu appears on the top left of the div and not below the parent menu option.. Screenshot is attached

Hi there, I am fairly new to web design as I only recently just completed a diploma....I am currently creating a website and am having a slight trouble trying to get my JavaScript function to work for the buttons on my clickable navigational dropdown menu. At the moment the dropdown content will not show, but the other function to hide it when clicking away from the menu seems to be working. My knowledge is very limited on JavaScript right now having only covered HTML and CSS so need the help! The website is currently at https://uklivesound.app.com HTML CSS JavaScript