Question

Technologies:

javascript

html

css

Tolerim

a day ago

What is the method for eliminating the gap between lines of a hamburger icon?

To make the hamburger icon fit in the corner, you can try decreasing its size without affecting its components. Adjusting the margin or padding of the bg or lines won't have any effect, so you need another solution. Here is the code for the icon:

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* body----------------------------------------------------------- */

body {
  background: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}


/* body-end-------------------------------------------------------- */


/* menu bg ---------------------------------------------------------*/

.menu-btn {
  position: absolute;
  top: 10%;
  left: 90%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */
}


/* menu bg-end --------------------------------------------------------*/


/* the-hamburger ------------------------------------------------------*/

.menu-btnburger {
  width: 30px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu-btnburger::before,
.menu-btnburger::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu-btnburger::before {
  transform: translateY(-16px);
}

.menu-btnburger::after {
  transform: translateY(16px);
}


/* ANIMATION */

.menu-btn.open .menu-btnburger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}

.menu-btn.open .menu-btnburger::before {
  transform: rotate(45deg) translate(35px, -35px);
}

.menu-btn.open .menu-btnburger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}


/* the-hamburger-end -----------------------------------------------------*/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Hamburger Animation</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="menu-btn">
    <div class="menu-btnburger"></div>
  </div>
  <script src="main.js"></script>
</body>

</html>

You've already tried adjusting the padding and margin, as well as resetting the height of the lines and reducing the font size, but none of these solutions worked. Do you have any other ideas for how to decrease the size of the icon?

Answers(1)

Accepted Answer

To decrease the size of the hamburger icon as a whole, you can adjust the transform: scale() property on the .menu-btn element. Note that this will also affect the size of the lines themselves. Here's an example of how you can adjust the size to 80% of the original:

.menu-btn {
  transform: scale(0.8);
}

Alternatively, to only adjust the size of the container without affecting the size of the lines, you can wrap the .menu-btn__burger element in a parent container and adjust the size of the parent. For example:

<div class="menu-btn">
  <div class="menu-btn__container">
    <div class="menu-btn__burger"></div>
  </div>
</div>

.menu-btn__container {
  width: 30px;
  height: 30px;
}

.menu-btn__burger {
  width: 100%;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu-btn__burger::before {
  transform: translateY(-16px);
}

.menu-btn__burger::after {
  transform: translateY(16px);
}

.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}

.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}