When the screen gets smaller than 680px, the hamburger menu does appear, and only the name at the left stays when clicked on, which is good, just as on https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
But when the hamburger menu is clicked on, it doesn't work. Any idea what is wrong?
My html and the scripts;
function myFunction2() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
window.onscroll = function() { myFunction()};
var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}body {
margin: 0;
}
.ad {
background-color: #fbf4e9;
text-align: center;
padding:5px;
}
.sticky {
position: fixed;
top: 0;
}
ul.navbar {
overflow:hidden;
list-style-type:none;
background-color:#f9eedd;
width:100%;
height:auto;
margin:0;
padding:0;
z-index:10;
}
ul.navbar li a{
display:block;
color:#8e8275;
text-decoration:none;
text-align: center;
padding: 13px 10px 13px 10px;
margin: 10px 7px 10px 7px
}
ul.navbar li.links{ float:left;}
ul.navbar li.icon { display: none;}
@media screen and (max-width: 680px) {
ul.navbar li:not(:first-child) {display: none;}
ul.navbar li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width: 680px) {
ul.navbar.responsive {position: relative;}
ul.navbar.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.navbar.responsive li {
float:none;
display:inline;
}
ul.navbar.responsive li a {
display: block;
text-align: left;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div class="ad"><h2>Scroll Down</h2><p>Scroll down to see the sticky effect.</p></div> <div> <ul class="navbar" id=myTopnav><li class="links"><a href=#home>Home</a></li><li class="links"><a></a></li><li class="links"><a href=#talen>Talen</a></li><li class="links"><a href=#genres>Genres</a></li><li class="links"><a href=#stijlen>Stijlen</a></li> <li class=icon><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li></ul> </div><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p>