Close Hamburger Menu after click event problem Jquery - html

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">
<img src="./img/logo.png" alt="logo"/>
</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
[

Answer 1

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)