Kevin Powell - Community•14mo ago

Responsive navbar question - Kevin's video

Hi all, in video below Kevin explains how to create a custom mobile menu which will open and close when user clicks the nav-bar button: https://www.youtube.com/watch?v=HbBMp6yUXO0&t=2081s I have copied the code and all is working great except 1 thing - on page load if I resize the browser, the mobile menu will "flash up" as it's transitioning itself on mobile breakpoint, due to this CSS within the .primary-navigation : @media (max-width: 35em) { .primary-navigation { transform: translateX(100%); transition: transform .4s ease-in-out; } } Is there a way to prevent this? I understand that this is not an issue for end-users because they will either be using the website on mobile or desktop (thus they shouldn't see the flickering menu on mobile breakpoint), but if I were to show this code to my peers they will resize the browser to play around with the navigation and will definitely notice the mobile menu appearing (aka moving across into translateX(100%) position) briefly every time they reach the mobile-view breakpoint. Is there anyway to fix this? It looks absolutely fine if I resize the window with the mobile menu open, because when I go back to mobile view again menu is already opened = no transitions taking place. But if I close the menu and then re-size the viewport the menu will flicker and scooch across the screen which doesn't look great.

Kevin Powell

YouTube

Responsive navbar tutorial using HTML CSS & JS

You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3 And the free Scrimba course here: https://scrimba.com/learn/spacetravel 🔗 Links ✅ Why I use HSL: https://youtu.be/Ab9pHqhsfcc ✅ More on feature queries (@supports): https://youtu.be/wPI8CEoheSk ✅ More info on .sr-...

9 Replies

this_is_dhananjay•9mo ago

Hi @Naks, I seem to be struggling with the same issue. I was just going to create a new help thread but decided to do a little search if anybody else had asked the same question. Were you able to find a solution? I did go through the CSS-Tricks article linked by Kevin in the video description and while it does fix the issue, it seems more like a silver bullet to me.

MarkBoots•9mo ago

Without seeing the project, a simple way is to add a resize evenlistener on the window, and close the menu when it triggers

window.addEventListener("resize", () => { /* close the menu */ }

window.addEventListener("resize", () => { /* close the menu */ }

this will always close it as soon you resize the window. you could add a condition where you check the size of the window and the current state of the menu before closing it.

this_is_dhananjay•9mo ago

@MarkBoots Thanks

this_is_dhananjay•9mo ago

I think I wasn't able to explain the problem well. That reminds me I follow CSSWizardry, and I have noticed the same behavior happening there as well. If you open their website (https://csswizardry.com/) on your computer and try resizing it, you will notice that the menu quickly appears and then disappears. That's exactly what is happening with me

Site-Speed Optimisation – CSS Wizardry

Web Performance Optimisation, Engineering, and Consultancy

this_is_dhananjay•9mo ago

Basically when the menu is closed, and you try to resize the window, the transition will run and the menu will move from it's opened state ( ( transform: translateX(0%); ) to the closed state ( transform: translateX(100%); ) Here's a link to the code I am using in my project: https://codepen.io/is_dhananjay/pen/MWRjRBx You will see the transition issue when resizing the preview

MarkBoots•9mo ago

ah okay, in that case you could create a class that has no transition to it. on window resize you add that class and remove it a few ms later

.no-transition {
  transition: unset !important;
}

.no-transition {
  transition: unset !important;
}

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

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

this_is_dhananjay•9mo ago

Thanks, I will try it out. Just out of curiosity, is there any other way we could fix this issue?

MarkBoots•9mo ago

maybe, possibly, didn't dive into the project too much

this_is_dhananjay•9mo ago

Thanks! If I do find a different approach, I will let you know.

Gaming

Programming

Responsive navbar question - Kevin's video