Kevin Powell - Community•13mo ago

When I load the website the hamburger menu is open and closes immediately

Hey. I am following Kevin's Responsive navbar tutorial using HTML CSS & JS. Everything works except when I add transition: transform 350ms ease-in to .primary-navigation when I load the website at width below 800px/resize it below 800px of width, the hamburger menu is open and it immediately closes: https://zakazkolcow.pl/ What am I missing? The code of the header is here: https://codepen.io/Iga-the-sasster/pen/poGryBY

Zakaz Kolców

Nasza misja to ochrona dzikich ptaków i zachowanie środowiska naturalnego.

Iga

CodePen

poGryBY

...

2 Replies

MarkBoots•13mo ago

normally a user won't just resize the window after page load, but if you want you could use js to temporarily disable the transition. add to JS

window.addEventListener("resize", ()=> {
  primaryNav.classList.add("prevent-transition");
  setTimeout(()=>{
    primaryNav.classList.remove("prevent-transition");
  },500)
})

window.addEventListener("resize", ()=> {
  primaryNav.classList.add("prevent-transition");
  setTimeout(()=>{
    primaryNav.classList.remove("prevent-transition");
  },500)
})

add to CSS

.primary-navigation.prevent-transition{
  transition: none;
}

.primary-navigation.prevent-transition{
  transition: none;
}

as soon as the window detects a resize, it adds the class to set the transition to none. after 500ms it will be set back to normal.

LilaOP•13mo ago

It worked like a charm. Thank you! 😊

Gaming

Programming

When I load the website the hamburger menu is open and closes immediately