Author: | nathanssantos |
---|---|
Views Total: | 3,572 views |
Official Page: | Go to website |
Last Update: | January 30, 2019 |
License: | MIT |
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:
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>
thank you