Hamburger Navigation Bar Help

Hi guys, I’m working on a hamburger navigation bar.
HTML:

<nav>
                            <div class="menu-holder">
                                <div class="btn-line"></div>
                                <div class="btn-line"></div>
                                <div class="btn-line"></div>
                            </div>
                            <!-- <div class="menu"> -->
                                <ul id="link-list">
                                    <li class="nav-item">
                                        <a class="nav-link" aria-current="page" href="">About</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="">Projects</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="">Blog</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="">Others</a>
                                    </li>
                                </ul>
                            <!-- </div> -->
                        </nav>

CSS:

#link-list{
  display:none;
}

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

 .menu-holder{
  position: fixed;
  z-index: 3;
  right: 25px;
  top: 5px;
  cursor: pointer;
  transition: all 0.5s ease-out;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:pink;
  opacity:0.7;
  margin: 5px;
  padding-top: 12px;
  padding-left: 1px;
  padding-right: 1.5px;
}
/*Styling the hamburger lines*/
 .menu-holder .btn-line {
  width: 28px;
  height: 3px;
  /* margin: 0 0 5px 0; */
  margin: 4px 10px 4px 10px;
  background: black;
  transition: all 0.5s ease-out;
}

.menu-holder:hover {
  transform: rotate(180deg);
  background:palevioletred;
  
}

JavaScript:

let hamburger = document.querySelector('.menu-holder');
let nav = document.getElementById('link-list');
hamburger.addEventListener('click', ()=> {
if (nav.style.display==="none") {
    nav.style.display==="inline";
} else {
    nav.style.display==="none";
}
});

However, when I clicked the hamburger, the navigation items didn’t appear. Can anyone help me?
Thank you so much!!!

The main issue is that inside your if and else, you have used === instead of =. This means that whether true or false, the code is performing a boolean check instead of actually assigning the value. If you change those you should find it kinda works, as in on first load it requires 2 clicks to actually work and then it’s fine. That’s because .style reads the inline styles on an element, and not the styles calculated from the css. So initially it sees no style attribute, therefore gives it one of “none”, and then the next click works correctly.
We can actually fix this problem and make the code a bit nicer at the same time. You already have “display: none;” on your element in the css, so you don’t really want to give it display: none; again, you want it to revert to the default state. Therefore what you can do is null out the style and do a boolean check instead, like so:

if (!nav.style.display) {
        nav.style.display = "inline";
    } else {
        nav.style.display = null;
    }

This checks if an html inline style for the nav element exists. If it doesn’t, then it gives it one of “inline” and if if does exist, it deletes the inline style and reverts back to the original css. This gives you the toggle effect without changing much of the code at all, and also keeping it a bit cleaner.

Hi! I understand the “===” part, but I applied your suggested code and it still didn’t run. I reexamined it many times and still couldn’t find out where it went wrong

Here’s a codepen demonstrating what I’m referring to. Give it a look over alongside your code and see where the error might be, it could be trailing brackets or an issue with a reference, as you can hopefully see from the codepen it works! Try using console.log’s also to figure out if the JS code is being stopped anywhere.

Found it. I included the inside the of the index.html file instead of below the tag. But why is this the case?

I’m sorry I’m not sure what you mean, would you be able to elaborate a little?

Found it. I included the inside the <script> tag in the <head> of the index.html file instead of below the </nav> tag. But why is this the case?
Sorry for the typo.

Ah okay that makes sense! So when a webpage is loaded in, the HTML file is loaded top down, meaning that it doesn’t load the next tag until the previous one is finished loading. We’re not addressing asynchronous loading which you may have encountered in your learning before, this is assuming there’s no Promise’s or anything like that.
So when your page is loading in, it’ll reach the head first, and execute your javascript code. However since this refers to the nav element, which hasn’t been loaded in yet, the script cannot find it yet and as such cannot apply the event listener. Therefore you need to place your scripts very specifically to load in when they need to. So generally, metadata and package scripts (eg. JQuery) are loaded in the head, and functional scripts are loaded right before the closing </body> tag. This ensures that any dependencies are loaded before your functional scripts are run, and ensures that any page elements are loaded before your functional scripts are run.

Of course asynchronous loading can change how this operates, as some scripts may not need to be loaded at a specific time and as such these can be loaded in the background allowing the main webpage to load faster without pausing to load that script. But that’s outside the scope of this particular explanation, just something for you to research further on!

Thank you so much. That’s clear enough.