5/5 - (1 vote)

Responsive Hamburger Menu Using HTML and CSS Only

Hello guys, today in this blog we will create a Responsive Hamburger Menu just by using HTML and CSS, it will work on all devices. The source code and explanation are there too so, let’s get started.

Let’s look at the video of the Responsive Hamburger Menu

Step 1: Write the HTML code and add a basic markup to our menu.

Go create a file named as index.html

And start writing the code.

The <header> element will be a container for the set of links of navigation.

Inside the header there will also be a logo which is going to be displayed as a anchor element (<a>) with the text “CSS Nav”.

After that there will be a input element of type checkbox which is going to be used as a button to toggle the navigation menu. This will be followed by an <label> element or tag with the class “menu-icon” and a “for” attribute set to “menu-btn”. This will be used to display the “hamburger” icon which will become visible in mobile.

Read>> Ecommerce Website Using Html,Css and JavaScript

Finally, there is an unordered list (<ul>) with the class of “menu”. This contains four list items (<li>) with links to different sections of the website. The links use anchor elements (<a>) with href attributes set to the corresponding section ID. The text for each link is “Our Work”, “About”, “Careers”, and “Contact”, respectively.

<body>
<header class="header">
    <a href="" class="logo">CSS Nav</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="#work">Our Work</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#careers">Careers</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </header>
</body>

With that the HTML code is completed.

Step 2: Write the CSS code and add Styling and responsiveness to our menu.

Go create a file named as style.css

And start writing code.

The body the selector is going to set the margin with font family and background-color for our page.

The a selector is going to set the color to all the links.

The .header selector is going to give the style for the header element. It is going to set its the background-color with box-shadow and also position and width and z-index of the header.

The .header ul selector is going to set the margin with padding also the list-style and overflow of the ul inside the header.

The .header li a selector is going to set the display with padding and border-right and text-decoration of the anchor links or a tags inside the list items of the header. It will also remove the underline decoration from all the links.

The .header li a:hover, .header .menu-btn:hover selector is going to change the background color(bg color) to grey color when the navigation link or the menu button will be hovered with mouse.

The .header .logo selector is going to set the display to block with floats the element to the left and set the font size to 2em and add padding to the top and bottom (10px) and left and right (20px). It will also removes the text decoration (underline) from the link.

body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #f4f4f4;
  }
  
  a {
    color: #000;
  }
  
  /* header */
  
  .header {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    position: fixed;
    width: 100%;
    z-index: 3;
  }
  
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
  }
  
  .header li a {
    display: block;
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
    background-color: #f4f4f4;
  }
  
  .header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
  }

Next lets add CSS to menu icons.

.header .menu is going to set the styling for the menu list that is appearing when the menu icon is clicked. max height and transition are being used to add animation to the opening and closing of the menu.

.header .menu-icon is going to set the styling for the menu icon container, which is going to include the clickable area for opening the menu. cursor property is used to make it clear that the icon is clickable. padding property will add some space around the icon.

.header .menu-icon .navicon is going to give the styling for the icon itself. background property will set the color of the icon to gray type. height and width is going to set the size of the icon.

.header .menu-icon .navicon:before and .header .menu-icon .navicon:after is going to give the two lines that will appear on the icon. background will set the color to dark type. content property will create a pseudo-element or pseudo-selector that will appear before and after the .navicon. display will make the pseudo-selector take up a full line. And height will set the height of the icon. position property will position the pseudo-selector relative to the .navicon. Also the transition will make the pseudo-selector animate when the menu is opened or closed.

.header .menu-icon .navicon:before and also the .header .menu-icon .navicon:after will be positioned above and below the .navicon using the top properties.

/* menu */
  
  .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    float: right;
    display: inline-block;
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: #333;
    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;
  }

Lets now add CSS to menu Buttons

.header .menu-btn is going to target the input element with the class of menu-btn and will set its display property to none which will make it is hidden we will make it visible when we will use it in mobile.

.header .menu-btn:checked ~ .menu will target the menu tag which is coming after the checked menu-btn input tag and will set its max-height to 240px (px means pixel is a unit in CSS) which will make the menu expand when the menu-btn will be clicked.

.header .menu-btn:checked ~ .menu-icon .navicon is targeting the navicon span tag inside the menu-icon label tag which come after the checked menu-btn input element and set its background to transparent.

.header .menu-btn:checked ~ .menu-icon .navicon:before and .header .menu-btn:checked ~ .menu-icon .navicon:after is goint to target the pseudo selector before and after the navicon span element and will apply a rotation to them.

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before and .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after will target the pseudo selector before and after the navicon span element but only for menu-icon label that do not have the .steps class and will set their top value to 0 which will help the lines form a X kind of shape.

/* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  .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;
  }

Lets now add media queries and make this responsive

This code will only be executed when the screen size will be is equal to or less than 48em which is 768px.

Read> Portfolio Website Using Html ,Css and JavaScript

.header li is targeting the li inside the .header class, it will make it float to left using the float property.

.header li a is going to target the a tag inside the li tag and will set its padding using padding property

.header .menu is going to target he .menu class inside the .header class it will set is clear property to none and also float to right and max height to none

and the most important which is making the display to none of .header. .menu-icon

/* 48em = 768px */
 
 @media (min-width: 768px) {
   .header li {
     float: left;
   }
   .header li a {
     padding: 20px 30px;
   }
   .header .menu {
     clear: none;
     float: right;
     max-height: none;
   }
   .header .menu-icon {
     display: none;
   }
 }

That will do it. Our Responsive Hamburger Menu is completed.

Let’s look at the video again

Live Preview Of Hamburger Menu

<br /> See the Pen <a href="https://codepen.io/mutedblues/pen/MmPNPG" target="_blank" rel="noopener"><br /> Responsive hamburger menu – pure CSS #1</a> by mutedblues (<a href="https://codepen.io/mutedblues" target="_blank" rel="noopener">@mutedblues</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

FAQs:

Is this Hamburger only made with HTML and CSS?

Yes, this Hamburger is only made with HTML and CSS no external library is included

Is this made responsive with media queries or bootstrap?

This is completely hand written code and it is only made with media queries and not bootstrap.

Do I need JavaScript to create this type of responsive menus?

No, you don’t need JS in this responsive menu this is purely created with just HTML and CSS, No JS.

Why can’t I see the Hamburger on my laptop?

You will not be able to see our use hamburger on your laptop you need a small screen so that you can use it. small screen like a phone or tablet.

Thank you so much.