@miroslavdurin
Posted
Toggle menu icon is working on a second click because you are checking "left" property of a DOM element you named menuBurger inside of inline-styles, but you've set that property inside of a class ".nav" (main.css on line 899). You can write something like this:
menuBurger.addEventListener("click", function(){
if (window.getComputedStyle(navBar).left < "0px"){
navBar.style.left= "0";
cross.style.display = "block";
appearOverlay();
}else{
navBar.style.left= "-100%";
disappearOverlay ();
}
})
or
menuBurger.addEventListener("click", function(){
if (navBar.getBoundingClientRect().x < 0){
navBar.style.left= "0";
cross.style.display = "block";
appearOverlay();
}else{
navBar.style.left= "-100%";
disappearOverlay ();
}
})
Both of those solutions work fine, but using too much of inline-styled properties is a bad practice. We usually use classes for that kind of job. I would suggest that you check some of the popular Udemy courses or maybe some YouTube videos to see how it's done.
Marked as helpful
@PhoenixDev22
Posted
@miroslavdurin Thanks a lot , I'll take your suggestions on board.