如何让下拉导航栏与 html 和 css 一起使用？

Question

I've been trying to make a dropdown navigation bar (having the links centered) for the mobile view, with only html and css (separate javascript file isn't needed, as the project isn't that dense). I think I missed something earlier on, but I can't find the problem anymore. Can someone make it work? Doesn't matter what method you use. If more parts of the code is needed, please inform me.

html navbar section:

    <!-- Navigation bar section -->
    
   <header class="navbar">
        <div class='nav_container'>

            <ion-icon class="mobile-menu-icon" id="mobile-cta" name="menu-outline"></ion-icon>

            <nav>
                <ion-icon class="mobile-close-icon" id="mobile-exit" name="close-outline"></ion-icon>

                <ul class="primary_nav">
                    <li><a href="#home">Home</a></li>

                    <li><a href="#about">About</a></li>

                    <li><a href="#portfolio">Portfolio</a></li>

                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
   </header>

script inside html:

    <script>
        const mobileBtn = document.getElementById('mobile-cta')
            nav = document.querySelector('nav')
            mobileBtnExit = document.getElementById('mobile-exit');

        mobileBtn.addEventListener('click', () => {
            nav.classList.toggle('menu-btn');
        })

        mobileBtnExit.addEventListener('click', () => {
            nav.classList.toggle('menu-btn');
        })
    </script>

scss:

.navbar {
    background: black;


    .navbar_container {
        display: flex;
        place-content: space-between;
    }

    nav{
       display: none;
       position: fixed;
       width: 100%;
       height: 58vh;
       padding: 1em; 
       top: 0;
       z-index: 999;
       background: var(--primary-blue);

       ul {
           margin-top: 2.1em;
       }

       li {
           a {
               display: block;
               padding: .9em;
               font-size: 2em;
               font-weight: 500;
               text-align: center;
               opacity: 0.85;

               &:hover {
                   opacity: 1;
                   transition: all 0.4 ease;
               }
           }
       }
    }
}

 .mobile-close-icon {
    position: absolute;
    right: 0px;
    margin-right: 1em;
    cursor: pointer;
    font-size: 3em;
    color: white;
    opacity: 0.85;

    &:hover {
        opacity: 1;
    }
}


.mobile-menu-icon {
    cursor: pointer;
    color: white;
    position: absolute; 
    right: 0px;
    margin-right: 1em;
    top: 15px;
    width: 40px;
    height: 40px;
} 

Answer 1

It looks like you haven't defined your const declarations correctly. Try something like below:

<!-- Option 1: Explictly defined `const` definitions -->
<script>
  const mobileBtn = document.getElementById('mobile-cta');
  const nav = document.querySelector('nav');
  const mobileBtnExit = document.getElementById('mobile-exit');

  mobileBtn.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })

  mobileBtnExit.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })
</script>

<!-- Option 2: "Inlined" const definitions -->
<script>
  const mobileBtn = document.getElementById('mobile-cta'),
  nav = document.querySelector('nav'),
  mobileBtnExit = document.getElementById('mobile-exit');

  mobileBtn.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })

  mobileBtnExit.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })
</script>