Responsive using CSS Grid & Flexbox, mobile first

Hi Badt, your solution is very nice I like it.

I just found a small "issue". I just discovered it because I played with the viewport. If you go to mobile viewport and click on the hamburger the navigation opens. This is the expected behavior. But if I change the viewport to desktop the navigation should switch to the desktop Navigation. But your solution still shows the mobile navigation.

With a small code like this you can prevent this:

  // Check if responsive menu is open when resized and then remove
  window.addEventListener("resize", () => {
    if (
      navBar.classList.contains("mobile-show") &&
      window.matchMedia("(min-width: 768px)").matches
    ) {
      headerNav.classList.remove("mobile-show");
    }
  });

This is a very small issue and normal user normally would not resize the viewport like developers.

Keep Going. The struggle was totally worth it. It is a nice solution 🥰