When working with Bootstrap, I dabbled with their template navbar to try and speed up my process. While it did give me an immediate navbar, there was so much extra stuff in it I always had to delete a bunch of code to keep only what I needed. I'm not a fan of having to remove extra code. I'd rather start simple and add only as needed.

So I made an extremely simple navbar using HTML, CSS, and a tiny bit of JavaScript.

First things first, the HTML:

  <nav>
  <div class="navWide">
    <div class="wideDiv">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="navNarrow">
    <i class="fa fa-bars fa-2x"></i>
    <div class="narrowLinks hidden">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</nav>

So basically this just creates a navbar with 3 links, and uses the Font Awesome "hamburger icon" for the dropdown menu on small screens.

The mobile-first design defaults to showing the mobile nav with the hamburger and hides the links until the screen reaches a larger size.

  nav .navWide {
    display: none;
    margin: 0 auto;
}

  @media (min-width: 480px) {

    nav .navWide {
        display: block;
    }

    nav .navNarrow {
        display: none;
    }
}

And finally, the JavaScript comes in to toggle the dropdown mobile nav:

  navLinks = document.querySelector('.navNarrow');
narrowLinks = document.querySelector('.narrowLinks');

navLinks.addEventListener('click', toggle);

function toggle() {
    narrowLinks.classList.toggle('hidden');
};

And that's pretty much it. You can view the entire project (which shows the rest of the CSS code) here, and a similar version built with React here.

Comments are always welcome!


2,783 0 0