Responsive Header Navigation With JavaScript And CSS Flexbox

Preview:

Description:

A Responsive Header Navigation that collapses the horizontal navbar into a dropdown menu by altering the flex-direction property on small screens.

See also:

• Top 10 JavaScript & CSS Responsive Menus

How to use it:

Load the necessary files in the document.

<link rel="stylesheet" href="assets/css/main-header-menu.css">
<script src="assets/js/main-header-menu.js"></script>

Create the HTML for the header navigation.

<header class="main-header">
  <div class="container">
    <img class="main-header-logo" src="assets/images/logo.png"></img>
    <nav class="main-header-menu dropdown-menu">
      <ul>
        <li><a href="#" class="dropdown-menu-item">Home</a></li>
        <li><a href="#about" class="dropdown-menu-item">About</a></li>
        <li><a href="#services" class="dropdown-menu-item">Services</a></li>
        <li><a href="#team" class="dropdown-menu-item">Team</a></li>
        <li><a href="#contact" class="dropdown-menu-item">Contact</a></li>
      </ul>
    </nav>
    <nav class="main-header-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#team">Team</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <button class="main-header-dropdown-button" onclick="toggleDropdownMenu(1)">
      <div class="stripes"></div>
      <div class="stripes"></div>
      <div class="stripes"></div>
      <div class="stripes"></div>
    </button>
  </div>
</header>