CODEWITHSUNDEEP
javascripthtmlcss
Angel94124
Angel94124

Reputation: 44

My hamburger menu isn't displaying correctly

Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong? I'm teaching myself how to develop and maintain sites.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <title>Angel News</title>
</head>
<body>
    <div id="con">
        <nav class="navbar">
            <a href="#" class="nav-branding">W.</a>
            <ul class="nav-menu">
                <li class="nav-menu">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">News</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">Popular</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">Trending</a>
                </li>
                <li class="nav-menu">
                    <a href="#" class="nav-link">Catergories</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
        <div class="section1">
            <img src="" alt="">
            <h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
            <p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
            <a href="#">Read More</a>
        </div>
        <div class="section2">
            <div class="section2-inside">
                <h3 class="section2-h3">New</h3>
                <div class="insidesection2-1">
                    <h4>Hydrogen VS Electric Cars</h4>
                    <p>Will hydrogen-fueled cars ever catch up to EV's?</p>
                </div>
                <div class="insidesection2-2">
                    <h4>The Downsides og AI Artistry</h4>
                    <p>What are the possible adverse effects of on-demand AI image generation?</p>
                </div>
                <div class="insidesection2-3">
                    <h4>Is VC Funding Drying Up?</h4>
                    <p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
                </div>
            </div>
        </div>
        <div class="section3">
            <div class="section3-1">
                <img src="" alt="">
                <div class="insidesection3-1">
                    <h4 class="insidesection3-1-h4">01</h4>
                    <h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
                    <p>What happens when old PCs are given modern upgrades?</p>
                </div>
            </div>
            <div class="section3-2">
                <img src="" alt="">
                <div class="insidesection3-2">
                    <h4 class="insidesection3-2-h4">02</h4>
                    <h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
                    <p>Our best picks for various needs and budgets.</p>
                </div>
            </div>
            <div class="section3-3">
                <img src="" alt="">
                <div class="insidesection3-3">
                    <h4 class="insidesection3-3-h4">03</h4>
                    <h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
                    <p>How the pandemic has sparked fresh opportunities.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

.navbar {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.nav-branding {
  font-size: 2rem;
}

.nav-link {
  transition: 0.7s ease;
}

.nav-link:hover {
  color: hsl(35deg, 77%, 62%);
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: rotateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: rotateY(-8px) rotate(-45deg);
  }
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    width: 100%;
    background-color: black;
    text-align: center;
    transition: 0.3s;
  }
  .nav-item {
    margin: 16px 0;
  }
  .nav-menu.active {
    left: 0;
  }
}

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active')
    navMenu.classList.toggle('active')
})

Upvotes: 1

Views: 50

Answers (1)

talent-jsdev
talent-jsdev

Reputation: 676

Please try to use translateY instead of RotateY in your css @media tag as follows:

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

Upvotes: 1

Related Questions