Html Question posted in
Some basic documentation can be found here.

Html – Hamburger menue <span> element going outside of <button> element

I cant relocate span element on the middle of button, from some point this is going on outside even when I try to used display flex , also transform in css it is not working.

I used transform and I expect to get this span element on the middle of button but its not really helping out. What did I miss ??

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

body {
  background-color: #171717;
  padding: 20px;
}

.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  margin: 10px;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  margin: 0;
  width: 50px;
  border: 3px solid pink;
}

.hamburger_box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 3px solid red;
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
  background-color: aqua;
}

.hamburger__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
  position: relative;
}

.hamburger__inner::after,
.hamburger__inner::before {
  left: 0;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
  position: absolute;
}

.hamburger__inner::after {
  top: 10px;
}

.hamburger__inner::before {
  top: -10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <button class="hamburger">
        <span class="hamburger_box">
        <span class="hamburger__inner"></span>
        </span>
    </button>
</body>

</html>
Tags:

3

Answers


  1. 0

    Remove display: inline-block in hamburger class.

    .hamburger{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding:10px;
    margin: 10px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    margin: 0;
    width: 50px;
    border:3px solid pink;
}
    Login or Signup to reply.
  2. 0

    The inner bars have width > 50 - 10 * 2. Just set its width to 100%

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

body {
  background-color: #171717;
  padding: 20px;
}

.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  margin: 10px;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  margin: 0;
  width: 50px;
  border: 3px solid pink;
}

.hamburger_box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 3px solid red;
  width: 100%;
  height: 24px;
  display: inline-block;
  position: relative;
  background-color: aqua;
}

.hamburger__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
  position: relative;
}

.hamburger__inner::after,
.hamburger__inner::before {
  left: 0;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
  position: absolute;
}

.hamburger__inner::after {
  top: 10px;
}

.hamburger__inner::before {
  top: -10px;
}

span {
  display: block;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <button class="hamburger">
        <span class="hamburger_box">
          <span class="hamburger__inner"></span>
        </span>
    </button>
</body>

</html>
    Login or Signup to reply.
  3. 0

    Can you try this? If you can open a small codesandbox, we can look at it in more detail.

       *, *::after, *::before {
            box-sizing: border-box;
        }
        
        body {
            background-color: #171717;
            padding: 20px;
        }
        
        .hamburger {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 10px;
            position: relative;
            cursor: pointer;
            background-color: transparent;
            border: 3px solid pink;
            width: 50px;
        }
        
        .hamburger_box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 24px;
            position: relative;
            background-color: aqua;
            border: 3px solid red;
        }
        
        .hamburger__inner {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 3px;
            background-color: #FFFFFF;
        }
        
        .hamburger__inner::after,
        .hamburger__inner::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 3px;
            background-color: #FFFFFF;
        }
        
        .hamburger__inner::after {
            top: 10px; 
        }
        
        .hamburger__inner::before {
            top: -10px;
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search