Close Hamburger Menu after click event problem Jquery

Question

I made a hamburger menu, and when I click on the links it closes it. Also has a logo which disappears when I click on the hamburger button. The webpage has a mobile and a desktop computer version that doesn't have a hamburger menu. But I have a problem. On the Desktop version, if I click on the links the Logo disappears as well.

I know that it does it because the hamburger-close-after-click event triggers it. But I don't know how I could change it to make it work well.

jQuery Code

const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
var mylogo = document.getElementById("myLogo");


hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link =>{
 link.classList.toggle("fade");

});
});


//logo-toggle
    $(document).ready(function(){
      $('.hamburger').click(function() {
      $('.logo-container').toggle().delay( 800 );
      });
    });
    
    
    //  hamburger-close-after-click event
    
    $( '.nav-links li a' ).on("click", function(){
      $('#hamburgerID').click();
    });

HTML Code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<nav>
        <div class="hamburger" id="hamburgerID">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        </nav>

        <header class="header" id="myHeader">
            
            <div class="logo-container" id="myLogo"> 
                <a href="#"><img src="./img/logo.png"  alt="logo"/> </a>
                </div>


            <nav>
                <ul class="nav-links">
                
                    <li><a class="nav-link" href="#details">DETAILS</a></li>
                    <li><a  class="nav-link" href="#description">DESCRIPTION</a></li>
                    <li><a   class="nav-link" href="#aboutus">ABOUT US</a></li>
            
                </ul>
            </nav>

The problem with pictures

[ Desktop version before click1

you do not want the logo to disappear on desktops ? is this what you want — Always Helping, Sep 02 '20 at 11:37

score 0 · Answer 1 · answered Sep 02 '20 at 13:48

You can use JQuery.toggleClass() to add and remove CSS classes, instead of using JQuery.toggle(), e.g.:

$('.hamburger').click(function() {
      $('.logo-container').toggleClass('open');
})

And then, in the CSS file, define the visibility depending on the screen size, e.g.:

.logo-container { display: 'none' }
.logo-container.open { display: 'block' }

@media (min-width: 1025px) {
    .logo-container { display: 'block' }
}

(Note: You will want to decide yourself how to identify the appropriate size to hide and show the elements. See also e.g.: how-to-target-desktop-tablet-and-mobile)

Close Hamburger Menu after click event problem Jquery

1 Answers1