Responsive Hamburger Menu with CSS only

Sometimes, we want to build a unique navigation system while designing a template of a website. Although, there a number of menu & nav available on the web. But in the case of lightweight projects, we have to use some pure CSS assets in our template. If you are also looking for a lightweight responsive meu, then you are in the right place. Here, I’m going to share a responsive hamburger menu created with only CSS.

Basically, it’s a horizontal navigation menu bar that converts into a hamburger menu on mobile devices (small screen). Besides this, there is also a space for a brand logo in this menu bar. The most important thing that makes this menu attractive is the animated hamburger icon. Before going further, I’ll recommend you to check the live version of this hamburger menu by visiting the demo page.

OK! let’s begin with HTML coding to build a hamburger menu without wasting time.

HTML Structure for Responsive Hamburger Menu

As we mentioned above, the menu consists of three main parts, a site logo, navigation links and an animated hamburger icon (that will display on a mobile screen). So, we’ll create the HTML header element, place a logo, ul (List of links), radio input for hamburger working and put all these elements inside a div container "menu-wrapper".

<div class="menu-wrapper">
 <header class="header">
  <a href="#home" class="logo">Codeconvey</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#careers">Careers</a></li>
    <li><a href="#contact">Blog</a></li>
    <li><a href="#contact">News</a></li>
  </ul>
</header>
</div>

You can also add your logo image inside <a href="#home" class="logo"> instead of text.

The CSS Styles

First of all, define basic styles for the header (menubar). If you want to customize its color, pass the custom value for the background-color attribute.

.header {
  background-color: #414141;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: relative;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

Now we’ll define styles for navigation links, here the important property is the display and the padding property. You can change its color (color: #414141) according to your needs.

.header li a {
  display: block;
 color: #414141;
  padding: 20px 20px;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: rgba(0, 0, 0, 0.10);
}

Add some styles for the site logo. If you want to add your logo in image format, then define the styles for image using .header .logo img{width: 120px}, etc.

    .header .logo {
      color: #fff;
      display: block;
      float: left;
      font-size: 1.5em;
      padding: 12px 20px;
      text-decoration: none;
    }

The following CSS generates the animated hamburger menu icon. If you want to change its color, update the value of the background (background: #fff;). Similarly, you can change its size by updating the width property (that is 18px;).

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 340px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

Finally, add the following CSS into your project to make the hamburger menu fully responsive.

/* Responsive */
@media only screen and (max-width: 768px){
    .header ul{
        background-color: #fff;
    }  
    .header li a {
    padding: 15px;
    border-bottom: 1px dotted #ddd;
  
  }
}

@media only screen and (min-width: 768px) {
    .menu-wrapper{
        background: #414141;
        height: 55px;
        line-height: 55px;
        width: 100%;
    }
  .header li {
    float: left;
  }
    .header .logo{
        line-height: 1;
    }
  .header li a {
    color: #fff;
    padding: 0px 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

That’s all! I hope you find this tutorial helpful. If you have any questions or suggestions related to the hamburger menu, let us know by comment below.