Centered Logo menu items even

Hi, so this code works great on desktop. On mobile though the code makes it so the mobile menu does not work. I opened a new thread here with the issue. I did grant admin access via the temp login plugin on that thread.

Here is my code:

 /*------------------------*/
/* 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(2) {
  /* Adjust the width of the logo */
    margin-right:150px;
}

#header .main_menu {
    /*background: gold;*/
    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: 310px;  
}
}

@media only screen and (min-width: 780px) {
  .logo, .logo a {
    height: 230px;
  }

  #top #header .av-main-nav li:nth-child(2) {
    margin-right: 270px;
  }

  #top #header span.logo {
    position: absolute;
    bottom: -70px;
  }
}

#top #header .av-main-nav-wrap {
    transform: translateX(-47%);
}