CSS Only Responsive Drawer Navigation – sz-navbar

Category: CSS & CSS3 , Menu & Navigation | June 29, 2020
Views Total:1,109 views
Official Page:Go to website
Last Update:June 29, 2020


CSS Only Responsive Drawer Navigation – sz-navbar


A CSS-only responsive navigation component that collapses the regular horizontal navbar into a hamburger toggle button on mobile.

Clicking/tapping the hamburger toggle button will toggle a side menu sliding from the right side of the webpage just like a drawer.

How to use it:

1. Load the core stylesheet sz-navbar.css in the document’s head section.

<link rel="stylesheet" href="css/sz-navbar.css" />

2. The required HTML structure for the responsive navbar.

<div class="sz-navbar">       
  <div class="sz-navbar-inner sz-navbar-right">
    <div class="demo-navbar-logo"><span>CSSScript.Com</span></div>
    <input type="checkbox" id="sz-navbar-check">
    <label for="sz-navbar-check" class="sz-navbar-hamburger">☰</label>
    <div class="sz-navbar-items">
        <div class="sz-navbar-item"><span><a href="link1">Item 1</a></span></div>
        <div class="sz-navbar-item"><span><a href="link2">Item 2</a></span></div>
        <div class="sz-navbar-item"><span><a href="link3">Item 3</a></span></div>
        ... more links here ...

3. Override the default style of the responsive navbar.

  height: 48px; /* overriding default 64px height */
  padding: 0 24px;
@media (max-width: 600px){
      width: 300px; /* limit width of mobile menu */

You Might Be Interested In:

Leave a Reply