Responsive Hamburger Menu CSS Only

This code implements a stylish and responsive hamburger menu design using only CSS. The menu icon transforms into a cross icon upon user interaction, offering a seamless navigation experience. The menu comes with four positions, top left, top right, bottom left, and bottom right.

Moreover, this CSS-only solution simplifies the implementation of a responsive hamburger menu, ensuring a user-friendly interface without the need for JavaScript.

How to Create Responsive Hamburger Menu

1. Begin by setting up the HTML structure. Place the <header> tag for the menu bar, <nav> elements for different sections, and the main content within <main> element.

Within the <nav> elements, create the menu toggles. These include checkboxes and spans for the hamburger icon lines.

Inside <ul class="menuItem">, list the navigation items using <li> and <a> tags. Customize the links and content for each menu item.

<header>
  <nav class="menu--left" role="navigation">
    <div class="menuToggle">
      <input type="checkbox"/>
      <span></span>
      <span></span>
      <span></span>
      <ul class="menuItem">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Show me more</a></li>
      </ul>
    </div>
  </nav>
  <nav class="menu--right" role="navigation">
    <div class="menuToggle">
      <input type="checkbox"/>
      <span></span>
      <span></span>
      <span></span>
      <ul class="menuItem">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Show me more</a></li>
      </ul>
    </div>
  </nav>
</header>

<nav class="menu--bottom--left" role="navigation">
  <div class="menuToggle">
    <input type="checkbox"/>
    <span></span>
    <span></span>
    <span></span>
    <ul class="menuItem">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Show me more</a></li>
    </ul>
  </div>
</nav>

<nav class="menu--bottom--right" role="navigation">
  <div class="menuToggle">
    <input type="checkbox"/>
    <span></span>
    <span></span>
    <span></span>
    <ul class="menuItem">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Show me more</a></li>
    </ul>
  </div>
</nav>

<main class="main">
  <h1>Pure CSS Hamburger Menu</h1>
  <div class="content">
    <p>
      Pure CSS Hamburger Menu is a design pattern for websites and apps that shows a menu icon that transforms into a cross icon when the user clicks on it, using only CSS properties and pseudo-elements to create a simple and responsive menu.
    </p>
  </div>
</main>

<footer>
  <div class="copyright">
    Inspired from "Pure CSS Hamburger fold-out menu" by <a href="https://codepen.io/erikterwan/pen/EVzeRP" target="_blank">Erik Terwan</a>
  </div>
</footer>

2. Now, use the following CSS code or customize it to suit your design preferences. This CSS defines the appearance and behavior of the hamburger menu and its elements.

html {
  box-sizing: border-box;
  overflow-x: hidden;
}

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  display: block !important;
  min-width: 350px;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #fff;
  overflow-x: hidden;
  background: #232323;
  background: linear-gradient(45deg, #042461 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #340447 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0f053a 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #050813 100%, rgba(9, 245, 5, 0) 70%) !important;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

.main {
  position: relative;
  padding: 60px 30px;
  width: 100%;
}
.main h1 {
  color: #fff;
  text-align: center;
}
.main .content {
  margin: 0 auto;
  width: 100%;
  max-width: 768px;
}
.main .content p {
  line-height: 1.8;
  text-align: center;
}

header {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
  align-items: center;
}

footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 30px;
  color: #fff;
}
footer .copyright {
  text-align: center;
}
footer a {
  color: #1BB76E;
  text-decoration: none;
  transition: 0.25s;
}
footer a:hover {
  color: #FF5500;
}

.menuToggle {
  display: block;
  position: relative;
  top: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
.menuToggle a {
  text-decoration: none;
  color: #232323;
  transition: all 0.3s ease;
}
.menuToggle a:hover {
  color: tomato;
}
.menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
.menuToggle span {
  position: relative;
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.menuToggle span:first-child {
  transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

.menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
.menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
.menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}
.menuToggle input:checked ~ .menuItem {
  transform: none;
}

.menuItem {
  position: absolute;
  width: 300px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.menuItem li {
  padding: 10px 0;
  font-size: 22px;
}

.menu--left {
  position: relative;
  width: 50%;
}
.menu--left .menuToggle {
  left: 0;
}
.menu--left .menuToggle input {
  left: 50px;
}
.menu--left .menuToggle span {
  left: 50px;
}
.menu--left .menuItem {
  left: 50px;
  margin: -100px 0 0 -50px;
  transform: translate(-100%, 0);
}

.menu--right .menuToggle {
  position: fixed;
  right: 0;
}
.menu--right .menuToggle input {
  right: 50px;
}
.menu--right .menuToggle span {
  right: 50px;
}
.menu--right .menuItem {
  right: 0;
  margin: -100px 0 0 0;
  transform: translate(100%, 0);
}
.menu--right .menuItem li a:hover {
  padding-left: 5px;
}

.menu--bottom--right .menuToggle {
  position: fixed;
  top: auto;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.menu--bottom--right .menuToggle input {
  right: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem {
  transform: scale(1);
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(1) {
  -webkit-animation: text-slide-in 0.2s;
  -moz-animation: text-slide-in 0.2s;
  animation: text-slide-in 0.2s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(2) {
  -webkit-animation: text-slide-in 0.3s;
  -moz-animation: text-slide-in 0.3s;
  animation: text-slide-in 0.3s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(3) {
  -webkit-animation: text-slide-in 0.4s;
  -moz-animation: text-slide-in 0.4s;
  animation: text-slide-in 0.4s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(4) {
  -webkit-animation: text-slide-in 0.5s;
  -moz-animation: text-slide-in 0.5s;
  animation: text-slide-in 0.5s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(5) {
  -webkit-animation: text-slide-in 0.6s;
  -moz-animation: text-slide-in 0.6s;
  animation: text-slide-in 0.6s;
}
.menu--bottom--right .menuToggle span {
  right: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--right .menuItem {
  bottom: 0;
  right: 0;
  margin: 0;
  padding-top: 50px;
  padding-bottom: 125px;
  transform-origin: bottom right;
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
.menu--bottom--right .menuItem li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.menu--bottom--right .menuItem li a:hover {
  padding-left: 5px;
}

.menu--bottom--left .menuToggle {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.menu--bottom--left .menuToggle input {
  left: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem {
  transform: scale(1);
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(1) {
  -webkit-animation: text-slide-in 0.2s;
  -moz-animation: text-slide-in 0.2s;
  animation: text-slide-in 0.2s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(2) {
  -webkit-animation: text-slide-in 0.3s;
  -moz-animation: text-slide-in 0.3s;
  animation: text-slide-in 0.3s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(3) {
  -webkit-animation: text-slide-in 0.4s;
  -moz-animation: text-slide-in 0.4s;
  animation: text-slide-in 0.4s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(4) {
  -webkit-animation: text-slide-in 0.5s;
  -moz-animation: text-slide-in 0.5s;
  animation: text-slide-in 0.5s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(5) {
  -webkit-animation: text-slide-in 0.6s;
  -moz-animation: text-slide-in 0.6s;
  animation: text-slide-in 0.6s;
}
.menu--bottom--left .menuToggle span {
  left: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--left .menuItem {
  bottom: 0;
  left: 0;
  margin: 0;
  padding-top: 50px;
  padding-bottom: 125px;
  transform-origin: bottom left;
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
.menu--bottom--left .menuItem li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.menu--bottom--left .menuItem li a:hover {
  padding-left: 5px;
}

@keyframes text-slide-in {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

Modify the positioning of menus (left, right, bottom-left, bottom-right) by altering classes like .menu--left, .menu--right, .menu--bottom--left, .menu--bottom--right.

Customize the design and functionality as per your project requirements for an engaging and intuitive navigation system.

That’s all! hopefully, you have successfully created a Responsive Hamburger Menu on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.