Updating the navigation

With the second page done, we can update the navigation so that all of our links work.

<header class="site-header">
  <div class="wrapper" data-type="wide">
    <div class="site-header__inner">
      <a href="/">
        <img class="logo" src="/assets/fungi-finders.svg" />
      </a>
      <button aria-controls="primary-navigation" aria-expanded="false">
        <span class="visually-hidden">Menu</span>
        <img src="/assets/hamburger.svg" alt="" />
      </button>
      <nav class="primary-navigation">
        <ul>
          <li><a href="/">Discover</a></li>
          <li><a href="mushroom-guide.html">Mushroom guide</a></li>
          <li><a href="mushroom-guide.html#faq">FAQ</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

The FAQ link

The FAQ is linking to an ID on the page, so we'll want to add id="faq" to that section as well.

Improving the anchor link behavior

When we use links that bring us to other sections of a page, we can use scroll-padding to add a little buffer for how far it scrolls down the page.

html {
  scroll-padding: 2rem;
}

And, speaking of scrolling, it's also common to introduce smooth-scrolling!

However, we have to be careful with smooth scrolling.

People who suffer from vestibular issues can be impacted by animations such as scrolling they aren't controlling, parallax effects, and other forms of motion on the page.

They can cause dizziness, vertigo, nausea and other side-effects.

To help with this, we have a prefers-reduced-motion media query, which allows us to respect a users preferences if they have opted-in for reduced motion.

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  scroll-padding: 2rem;
}