Question 40102 in PHP Question posted in
Official manual can be found here.

Why isn't my hamburger navigation menu showing up? – PHP

<head>
<link rel="stylesheet" href="/stylesheet/styles.css"/>
    <script src="https://kit.fontawesome.com/929330f5ee.js"crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
</head>

  <body>
    <header>
      <nav class="navbar">
        <a href="#" class="nav-branding">MYBRAND</a>
        <ul class="nav-menu">
          <li class="nav-item">
            <a href="#" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Contact</a>
          </li>
        </ul>
        <div class="hamburger">
          <i class="fa-solid fa-bars"></i>
        </div>
      </nav>
    </header>
</body>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

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

header {
    background-color: #E50914;

}


li {
    list-style: none;
}

a {
    color: white;
    font-size: x-large;
    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: 25px;
}

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

.nav-link:hover{
    color: rgb(73, 0, 0);
}

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



@media (max-width:800px){
    
   .hamburger{
        display: block;
        color: white;
        font-size: x-large;
      }
    
   .nav-menu{
        position: fixed;
        left: -100%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: #262626;
        width: 100%;
        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");
})

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
  hamburger.classList.remove("active");
  navMenu.classList.remove("active");
}))

hi, I am trying to convert a navbar into a hamburger menu for mobile screens, but it seems like my hamburger icon shows up but the navigation menu doesn’t…

I have tried everything I have copied the code from a youtube video. The code was working perfectly fine on the video but It seems like its not working for me.

I have just started coding and I’m learning css and html. I have just started learning JS.

Can anyone help me with this issue?

Tags:

2

Answers


  1. 0

    You need to set the color for the fa solid element

    <div class="hamburger">
  <i class="fa-solid fa-bars" style="color: #ffffff"></i>
</div>

    enter image description here

    enter image description here

    Login or Signup to reply.
  2. 0

    I tried copy pasting the source code you provided and it works for me. That is, the navbar collapses into a hamburger when the screen is smaller than the specified max-width (800px) and expands back to normal otherwise. You can change the max-width value in the media query to something less (e.g., 640px) if you want it to expand for screens narrower than 800px.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search