Hamburger menu in Mobile Does Not Work

Hello SquareSpace community,

This is my story: On Desktop, I wanted to have the hamburger menu instead of the regular menu to give a cleaner look to my site, and I wanted that hamburger to be positioned on the left side to keep the right upper corner clean for my call to action (Reserve Now).

Anyway, I read several forum entries until I finally found the CSS code that gave my desktop menu exactly the look I wanted (see code below)... but then I discovered that this line of code: .header-burger {position: absolute;} blocked the functionality of my Mobile menu 😪 ... but if I remove that line, my menu in Desktop goes to the right. I feel between the sword and the wall.

>> The URL of my unpublished site is: https://cow-spinach-t55c.squarespace.com

>> The viewer password is: Majahuitas2023$

// Mobile menu on Desktop//
.header-burger {position: absolute;}

.header-nav{
  display: none;
}

.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
visibility: visible;
  opacity: 1;
}

@media screen and (min-width:800px) {
.header--menu-open .header-menu {
    bottom: unset;
    height: 100%;
    left: 0px;
    right: 70%;
    top: 0px;
}
.header-menu-nav-folder.header-menu-nav-folder--active {
    overflow: hidden;
}
.header-menu-nav-folder-content a {
    margin-top: 0px;
    margin-bottom: 0px;
}
}
.header-menu-nav-item a {
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 4;
  text-align: left;
}
.header-title-logo { 
    text-align:center;
      margin-left:50%;
}

Remove that line & use this code to change position of burger

.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}
.header-burger {
    order: 1 !important;
}