Responsive Header Navigation With JavaScript And CSS Flexbox

Category: Javascript , Menu & Navigation | January 30, 2019
Views Total:3,605 views
Official Page:Go to website
Last Update:January 30, 2019


Responsive Header Navigation With JavaScript And CSS Flexbox


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

See also:

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">
        <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>
    <nav class="main-header-menu">
        <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>
    <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>

You Might Be Interested In:

One thought on “Responsive Header Navigation With JavaScript And CSS Flexbox

Leave a Reply