Disable completely mobile overlay menu animation, and also change "x" icon (for closing mobile menu) to a custom asset.

Hey, I have two separate issues I would appreciate help with:

The first task is disabling the mobile overlay menu animation. I'd like for the menu to pop back and forth instantaneously with no fading, sliding, etc.

The other thing I would like to do is assign a custom asset for the "X" close icon that brings the mobile menu back to the main page. I already have something set for the icon, but it remains static no matter the state of the overlay menu, open/close.

http://www.petertpolitis.com

Thanks

#1. Add to Website > Website Tools > Custom CSS

.header-menu {
    transition: none !important;
}

#2. You mean replace X with custom icon? Can you send icon file?

#1: The above code doesn't seem to have an effect.

#2: Just a placeholder for now.

Add this CSS code

body.header--menu-open div.burger-inner {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_11/placeholder.png.5d045e7611b023fe6cba9bf0c322002b.png);
    background-size: contain;
    background-repeat: no-repeat;
}
body.header--menu-open div.burger-inner>* {
    opacity: 0;
}