Split Menu and Burger Layout issue

Hello,

I’m creating a test site at the URL posted in the private content area.

I have used the split menu css you posted on a previous post (posted below).

I have also used some other css you posted somewhere to enable the menu to switch to burger menu at a lesser breakpoint (posted below also).

However when the breakpoint occurs at the first point it puts the burger icon right in the centre of the logo, before the 2nd breakpoint puts it correctly at the right hand side.

I also tried using the Main Menu > General > Menu Items For Mobile options but these push the burger menu to the very left of the screen and when clicked it doesn’t work.

My question is can you help me fix it so the breakpoints work correctly so that the current menu items always show without overlapping the logo and when screen size is reduced enough the burger menu always goes to the right hand side correctly?

/*------------------------*/
/* CSS - Logo center split menu
/*------------------------*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(4) {
  /* Adjust the width of the logo */
    margin-right: 30vw;
}

.av_seperator_small_border .av-main-nav > li:nth-child(5) > a > .avia-menu-text {
  /* Remove Border */
    border-left: none !important;
}

#header .main_menu {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}

#header .logo {
    left: 50%;
    transform: translateX(-50%);
    z-index:999;
}

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 250px;  
}
}

/* BURGER MENU SMALL DESKTOPS & TABLETS */
@media only screen and (max-width: 1366px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}