[17+] Amazing Responsive Website Header Navbar Templates | Headers.css

HTML and CSS schema for over 17+ website headers. Collection of headers accessible, responsive, mobile-friendly header navigation bar templates for designing modern web apps.

Built with CSS flexbox and easy to customize via SCSS.

How to make use of it:

1. Create the HTML for the header navbar.

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand">Brand</a>
    <nav class="nav">
      <button class="nav__toggle" aria-expanded="false" type="button">
        menu
      </button>
      <ul class="nav__wrapper">
        <li class="nav__item"><a href="#">Home</a></li>
        <li class="nav__item"><a href="#">About</a></li>
        <li class="nav__item"><a href="#">Services</a></li>
        <li class="nav__item"><a href="#">Hire us</a></li>
        <li class="nav__item"><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

2. Load the primary stylesheet within the doc.

<link rel="stylesheet" href="styles/header-1.css" />
...
<link rel="stylesheet" href="styles/header-2.css" />

3. Enable the toggle button to reveal the nav menu on mobile devices.

let navToggle = document.querySelector(".nav__toggle");
let navWrapper = document.querySelector(".nav__wrapper");
navToggle.addEventListener("click", function () {
  if (navWrapper.classList.contains("active")) {
    this.setAttribute("aria-expanded", "false");
    this.setAttribute("aria-label", "menu");
    navWrapper.classList.remove("active");
  } else {
    navWrapper.classList.add("active");
    this.setAttribute("aria-label", "close menu");
    this.setAttribute("aria-expanded", "true");
  }
});

Responsive Header Navbar Templates, responsive navbar template, stylish responsive Header, Headers CSS Plugin/Github


See Demo And Download

Official Website(shadeed): Click Here

This superior jQuery/javascript plugin is developed by shadeed. For extra Advanced usage, please go to the official website.

Share