Harrison Malone

You'll often see this sort of design when it comes to navbars.

A logo will always be fixed to the left. For larger screens links will be justified to the right and for mobile a hamburger menu will show and the links will only appear when the burger is clicked. Feel free to resize the browser window in the site above and see the changes that take place.

The implementation isn't too complicated but you need a combination of JavaScript, HTML and CSS knowledge.

You'll firstly need the markup.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="your font awesome url"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="hamburgers.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <div class="logo">
        <a href=""><i class="fas fa-border-style"></i></a>
      </div>
      <div class="hamburger-container">
        <button
          class="hamburger hamburger--elastic button-outline"
          type="button"
        >
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>
      </div>
      <div class="links">
        <a href="">Projects</a>
        <a href="" class="say-hello">Say Hello</a>
      </div>
    </nav>
    <ul class="hamburger-links">
      <li><a href="">Projects</a></li>
      <li><a href="">Say Hello</a></li>
    </ul>
  </body>
</html>

We have a nav element with 3 different sections: a font awesome logo, a hamburger container with the hamburger icon nested inside and a links section for links that appear when the screen is desktop sized. To ensure that the links and logo are distributed evenly in space we use a flexbox with justify-content: space-between and some margin.

When the screen is less than 500px the links will display as none and the hamburger will be displayed as block. This is the CSS used to achieve this effect.

Notice that we still have the hamburger-links ul. Basically what we need to do is use JavaScript to make this ul appear only when the hamburger is clicked. We also need to remove it when the hamburger is toggled off. You'll need to use a script tag to insert the JavaScript into. This tag is placed just before the closing body tag.

<script>
  const hamburger = document.querySelector('.hamburger')
  const links = document.querySelector('.hamburger-links')
  hamburger.addEventListener('click', function () {
    hamburger.classList.toggle('is-active')
    const isActive = hamburger.classList.contains('is-active')
    if (isActive) {
      links.style.display = 'block'
    } else {
      links.style.display = 'none'
    }
  })
</script>

I'm also using some external CSS another developer has written to animate the hamburger. Once you have all of this linked up you should be good to go.

Feel free to clone this navbar and change the styles up!

Tuesday, March 2, 2021

Navbars