11 replies

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) {

@media (max-width: 35em) {

.primary-navigation {

.primary-navigation {

transform: translateX(100%);

transform: translateX(100%);

transition: transform .4s ease-in-out;

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.

YouTubeKevin Powell

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