Changing icons in navbar on scroll - html

Question

In my navbar I have two logos and a hamburger icon (for displaying the menu). When the user scrolls down, the navbar should change the background color, logos and hamburger should change color (from white to dark). I have managed to achieve that. But when you open and then close the menu after it has been scrolled, the hamburger icon disappears. I have tried many things (including adding classes to the hamburger button on scroll), but nothing worked. I have no idea, how to target "closing" button when the navbar is in scrolled state, so the "dark" version of hamburger button shows up.
$(function(){
function e(){$(window).scrollTop()>0?(
$("nav.nav").addClass("scrolled"),
$(".content-nav").fadeIn(200)):(
$("nav.nav").removeClass("scrolled"),
$(".content-nav").fadeOut(200))
};
});
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".cross").hide();
$(".hamburger-white").show();
});
});
$( ".menu li" ).click(function() {
$( ".menu" ).toggle();
$(".cross").hide();
$(".hamburger").show();
});
});
.landing-page-nav-container {
background-color: #29428A;
}
.scrolled .landing-page-nav-container {
background-color: #FFFFFF;
}
.logo-dark, .hamburger-dark {
display: none;
}
.scrolled .logo-dark, .scrolled .hamburger-dark {
display: initial;
}
.scrolled .logo-white, .scrolled .hamburger-white {
display: none;
}
<nav class="nav navbar-fixed-top collapsed">
<div class="landing-page-nav-container">
<a href="<?php the_field('link_logo')?>">
<img class="img-responsive img-nav img-logo-centrum logo-white" src="https://placekitten.com/50/50">
<img class="img-responsive img-nav img-logo-centrum logo-dark" src="https://placekitten.com/49/50">
</a>
<img class="img-responsive img-nav img-logo-forum logo-white" src="https://placekitten.com/49/49">
<img class="img-responsive img-nav img-logo-forum logo-dark" src="https://placekitten.com/50/49">
<button class="hamburger hamburger-white">
<img class="img-responsive img-nav hamburger-icon" src="https://via.placeholder.com/50x50/000000/FFFFFF">
</button>
<button class="hamburger hamburger-dark">
<img class="img-responsive img-nav hamburger-icon" src="https://via.placeholder.com/50x50">
</button>
<button class="cross" style="display: none">
<img class="img-responsive img-nav hamburger-icon cross-icon" src="https://via.placeholder.com/50x50?text=cross">
</button>
<div class="menu" style="display: none">
<ul>
<li><?php the_field('about_napis')?></li>
<li><?php the_field('program_napis')?></li>
<li><?php the_field('registration_napis')?></li>
<li><?php the_field('report_napis')?></li>
<li><?php the_field('lttalks_napis')?></li>
<li><?php the_field('events_napis')?></li>
</ul>
</div>
</div>
</nav>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 1

The problem was in applying .show() on .hamburger, after clicking on .cross (which was messing in corect executing CSS).
Working jQuery code:
$(function(){
function e(){$(window).scrollTop()>0?(
$("nav.nav").addClass("scrolled"),
$(".content-nav").fadeIn(200)):(
$("nav.nav").removeClass("scrolled"),
$(".content-nav").fadeOut(200))
};
});
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".cross").hide();
$(".hamburger-dark").removeAttr("style");
$(".hamburger-white").removeAttr("style");
});
});
$( ".menu li" ).click(function() {
$( ".menu" ).toggle();
$(".cross").hide();
$(".hamburger-dark").removeAttr("style");
$(".hamburger-white").removeAttr("style");
});
});