Change breakpoint of mobile menu AND display a different menu at mobile

What I need:
– The same hamburger/overlay menu experience (logo left – hamburger right) from mobile all the way up to 1199px (just under the 1200px)
– Have 2 different menu lists, one for “desktop” (min-width: 1200px) and one for “mobile/tablet” (max-width:1199px)

I figured out how to move the logo to the left for max-width:1199px. And I’ve already created the 2 different menus, assigned their classes within the Main Menu area, and added the code below to my CSS:

@media only screen and (max-width: 1199px) {
.only_desktop { display: none !important; }}

@media only screen and (min-width: 1200px) {
.only_mobile { display: none !important; }}

Then, to turn the mobile menu into a hamburger/overly, I added some more code per what you suggested in various threads (below), and it kind of works, except 2 problems:
1. the “x” close button sometimes disappears on the desktop version at width below 1200px.
2. The menu sits below the logo (as it has simply replaced the regular desktop menu)

@media only screen and (max-width: 1199px) {
#header_meta {
        display: none; }
.only_desktop {
        display: none !important; }
.menu-item {
        display: none; }
.av-burger-menu-main.menu-item-avia-special {
        display: block; }

Do I need to completely start over? Is there a better way to make sizes 768 through 1199 look just like the 767 and below?

• This topic was modified 6 years, 9 months ago by katesi4.