I have an issue with the responsive sidebar nav links(anchor tags) won't click Here is the part of the HTML code

 <!-- Nav -->
       <nav class="main-nav">
           <img src="img/logo-dark-transparent.png" alt="AS Logo" class="logo">
           <ul class="main-menu">
               <li><a href="#home">Home</a></li>
               <li><a href="#about">About Me</a></li>
               <li><a href="#projects">Projects</a></li>
               <li><a href="#contact">Contact Me</a></li>
           </ul>
          ....
       </nav>

The main CSS code for navbar is here

.main-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 20px 0;
    z-index: 1;
    /* font-size: 1.5em; */
    font-size: clamp(.5rem, .8vw   1rem, 1.5rem);
}

.main-nav .logo{
    width: 110px;
}

.main-nav ul{
    display: flex;
}

.main-nav .main-menu li{
    padding: 0 2em;
}
.main-nav .main-menu li a{
    padding-bottom: 2px;
}
.main-nav .main-menu li a:hover{
    border-bottom: 2px solid var(--text-color);
}

The CSS code for side nav is

@media(max-width:700px){
   .container{
    overflow-x: hidden;
   }

    section{
        height: auto;
    }
    /* Navbar */
    .menu-btn{
        display: block;
    }

    .menu-btn:hover{
        opacity: 0.5;
    }
    
    .main-nav ul.main-menu{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--bg-color);
        filter: brightness(0.85);
        width: 60%;
        height: 100%;
        opacity: 0.9;
        padding: 30px;
        transform: translateX(-500px);
        transition: transform 0.5s ease;
    }

    .main-nav ul.main-menu.show{
        transform: translateX(-20px);
    }

    .main-nav ul.main-menu li{
        padding: 20px;
    }
    .main-nav ul.main-menu li:first-child{
        margin-top: 2rem;
    }
    .main-nav ul.right-menu{
        margin-right: 60px;
    }
    

But the show class is toggled dynamically by JS code below

//Toggle Menu
const mainMenu = document.querySelector('.main-menu');
document.querySelector('.menu-btn').addEventListener('click', () => {
    mainMenu.classList.toggle('show');
})

Also, I wanted to achieve smooth scrolling which works on desktop version but doesn't in the mobile sidebar menu using this JS code snippet

//Vanilla JS Smooth Scroll
document.querySelectorAll('.main-menu a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
          
            behavior: 'smooth'
        });
    });
});

I have been debugging for hours with no success, any help or advice would be appreciated.

CodePudding user response：

Maybe the id of div you want to scroll with do not match the link(href) addresses.You need to make sure this. Also, you can do a null check in the JavaScript code as follows.

document.querySelectorAll('.main-menu a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      var elmnt = document.querySelector(this.getAttribute('href'));
        if(elmnt != null) {
          elmnt.scrollIntoView({
            behavior: 'smooth'
          });
        }
    });
});

CodePudding user response：

Add !important in your CSS code

.menu-btn { display: block !important;  }