Nav obscuring logo

Hello and thanks for checking out my post.

For context, this is what I am dealing with: https://moxiemeninc.com/emerald-nav.pdf

I’ve made adjustments to the CSS but all it does is make the nav completely disappear. I need the hamburger to show up around the 1320 px mark. Here is the code I used:

@media only screen and (max-width: 1320px) {
#avia-menu {
display: none !important;
}

.av-burger-menu-main {
display: block !important;
}
}

I also tried this:

@media only screen and (max-width: 1350px) {
/* SHOW the burger toggle */
.av-burger-menu-main {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
}

/* HIDE the desktop menu */
.av-main-nav-wrap,
#avia-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
}

/* ENSURE the mobile menu container shows when open */
#mobile-advanced {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
}
}

I also tried updating the pho file with the following code:

add_filter( ‘avf_responsive_size’, ‘set_custom_menu_breakpoint’ );
function set_custom_menu_breakpoint( $width ) {
return 1320; // no quotes, no ‘px’
}

But I’ve had no success. Thanks in advance for any advice you can dispense.