Updating the navigation

Hamburger menus are, in my opinion, overused.

We could keep everything as it is now and add a few flex-wrap: wrap declarations and more or less be done.

That said, if you're working in this industry, you'll have to make your fair share of these, so we might as well learn how to do it properly!

Updating the HTML

This is what we have now:

<header>
  <div class="logo">...</div>

  <nav class="primary-navigation">
    <ul>
      <li><a href="#">Discover</a></li>
      <li><a href="#">Mushroom guide</a></li>
      <li><a href="#">Faq</a></li>
    </ul>
  </nav>
</header>

And, to have a hidden menu with a hamburger button that toggles it opened and closed, we'll need add a button.

<button>
  <span class="visally-hidden">Menu</span>
  <img src="/assets/hamburger.svg" alt="" />
</button>

We must have an alt attribute on an image, but in this case, the image is decorational, so we want to leave it blank. If we had a description, it would be redundant, as we already have the Menu text, which is much more useful than alt text on an image.

Now, we want to connect the button to the navigation.

We can do that by adding an id to the nav, and an aria-controls to the button:

<button aria-controls="primary-navigation">...</button>

<nav id="primary-navigation">...</nav>

And lastly, we want to convey to assistive technologies whether or not the menu is opened or close. We can do that with aria-expanded.

By default, the menu will be closed.

<button aria-controls="primary-navigation" aria-expanded="false">...</button>

Committing the changes

Our feature isn't finished, but we've made some pretty important changes, so it's probably a good idea to commit those.

Making a commit is a bit like taking a picture in time that we can easily roll back to if ever we screw things later on.

In the video lessons, I'll be mentioning to commit changes on a regular basis going forward. I won't be doing that in these written ones going forward. I will still mention creating branches and merging them within these written lessons as well though.