Why my JS code isnt enabling the Nav list toggle-CodePudding

https://codepen.io/brunhild_912/pen/MWQPErp

Here is my code. I am trying to enable the nav list toggle, but its not happening. Why? Any guidance or tips over this issue ae welcomed. I have tried many options but its being stubborn unfortunately.

HTML

<button type="button" >
                        <span></span>
                    </button>

                    <!--Navbar-->
                    <nav >
                        <ul>
                            <li ><a href="#home">Home</a></li>
                            <li ><a href="#about">About</a></li>
                            <li ><a href="#our-menu">Menu</a></li>
                            <li ><a href="#testimonials">Testimonials</a></li>
                            <li ><a href="#team">Team</a></li>
                            <li ><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>

CSS

.header .nav-toggler{
    height: 40px;
    width: 44px;
    margin-right: 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .nav-toggler.active{
    position: absolute;
    right: 0;
    z-index: 1;
}

.header .nav{
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background-color: var(--main-color);
    box-shadow: var(--shadow);
    overflow-y: auto;
    padding: 80px 0 40px;
    transform: transform 0.5s ease;
    transform: translateX(100%);
}

.header .nav .open{
    transform: translateX(0%);
}

JavaScript

const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);

function toggleNav(){
    navToggler.classList.toggle(".active");
    document.querySelector(".nav").classList.toggle(".open");
}

CodePudding user response：

The first issue you have is that you need to remove the . (period) from your class references (toggle(".active")). Making your toggleNav method like:

function toggleNav(){
    navToggler.classList.toggle("active");
    document.querySelector(".nav").classList.toggle("open");
}

Also, in your css you reference an object with a .header class that does not exist. So you would need to wrap your entire html with:

<div class='header'>
... [YOUR HTML CODE]
</div>

Also, in your css your declaration: .header .nav .open Should be: .header .nav.open

You need a bit of css work for it to function smoothly but this should point you in the right direction.

CodePudding user response：

There are some JS and css issues in your code. check following code.

const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);

function toggleNav(){
    navToggler.classList.toggle("active");
    document.querySelector(".nav").classList.toggle("open");
}

.header .nav-toggler{
    height: 40px;
    width: 44px;
    margin-right: 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  background: red;
}


.header .nav{
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background-color: var(--main-color);
    box-shadow: var(--shadow);
    overflow-y: auto;
    padding: 80px 0 40px;
    transition: transform 0.5s ease;
    transform: translateX(100%);
}

.header .nav.open{
    transform: translateX(0%);
}

<div >
<button type="button" >
                        <span></span>
                    </button>

                    <!--Navbar-->
                    <nav >
                        <ul>
                            <li ><a href="#home">Home</a></li>
                            <li ><a href="#about">About</a></li>
                            <li ><a href="#our-menu">Menu</a></li>
                            <li ><a href="#testimonials">Testimonials</a></li>
                            <li ><a href="#team">Team</a></li>
                            <li ><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
</div>