Hello!
I am currently working on a diy mobile-menu. Why?: I wanted to have a burger menu that gives me more freedom of what to place where, collaps rows etc.
Maybe there is another function for this? jasonkittner.com
Plan is to use the overlay function of a page and use the burger. I managed that the burger swaps to an X the second you press it. But I cannot figure out how to address the now X to close the menu. I tried to use the close button function of the overlay but didn't like that it doesn't replace the burger. this is the code i have right now:
document.addEventListener("DOMContentLoaded", function() {
var burgerIcon = document.querySelector('.overlay-burger.custom-overlay-burger.burger-overlay-id-73 img');
var originalSrc = burgerIcon.src; // og burger icon
var toggleSrc = 'https://www.jasonkittner.com/wp-content/uploads/2024/10/Burger2.png'; // url of x icon
burgerIcon.addEventListener('click', function() {
burgerIcon.src = (burgerIcon.src.includes(originalSrc)) ? toggleSrc : originalSrc;
});
});
I tried this to make the burger close the overlay:
<script>
jQuery(document).on('click', '.overlay-burger.custom-overlay-burger.burger-overlay-id-73', function(){
jQuery('.lay-overlay .overlay-close.custom-overlay-close-icon').click();
});
</script>
Happy to hear from you!