unusual layout – an Günni

your sketch on the bottom is the non responsive case :
left a widget area – then logo – then main menu on the right ? and then under all that the page content?

https://kriesi.at/documentation/enfold/example-of-widget-left-logo-center-menu-right/

setting the nav to:

#top #header .av-main-nav {
  display: flex;
  flex-flow: column nowrap;
}

#top #header_main > .container, 
#top #header_main > .container .main_menu .av-main-nav > li > a, 
#top #header_main #menu-item-shop .cart_dropdown_link {
  height: 30px;
  line-height: 30px;
}

will put your list-items under each other.

BUT: Can you really recommend something like this?

der Grund warum das Logo nicht mittig ist, ist das die flex items auf auto weite stehen.
Man muss also das Widget und die Navigation auf gleich Weite setzen.
Diesen absoluten Wert muss man dann aber im Responsiven Fall ( bei dir unterhalb 1000px) neu setzen, da der Hamburger dann die kleinere Version ist.

Bitte schaue ob du diese Selektoren bereits verwendet hast – und ändere dann die Werte wenn Sie vorhanden sind bzw. setze die neuen Properties hinzu.

#top #header #header_main .container.av-logo-container .inner-container {
  height: inherit;
  position: relative !important;
  flex-wrap: wrap;
  padding: 20px 0;
  justify-content: space-between;
}

#top #header #header_main .container.av-logo-container .inner-container nav,
#top #header #header_main .container.av-logo-container .inner-container > div {
  flex: 1 1 240px;
}

.responsive #top #header #header_main .inner-container .logo {
  order: 2;
  flex-basis: auto;
  min-width: 160px;
  max-width: 240px;
  z-index: 9;
}

.responsive #top #header #header_main .inner-container .main_menu  {
  justify-content:  flex-end
}

.av-main-nav > li .avia-menu-text {
  float: right !important;
}

@media only screen and (max-width: 1000px) {
  #top #header #header_main .container.av-logo-container .inner-container nav,
  #top #header #header_main .container.av-logo-container .inner-container > div {
    flex: 1 1 100px;
  }
    #top #header #header_main .container.av-logo-container .inner-container .logo {
    flex: 1 1 40%;
    overflow: visible !important;
  }

  #top #header #header_main .container.av-logo-container .inner-container .logo a {
    overflow: visible !important;
  }

  #top #header #header_main .container.av-logo-container .inner-container .logo a img {
    max-height: 130px
  }
}

wie gesagt – ich kann ganz gut mit den dev tools umgehen, und dein Hamburger war bei 1000px aktiv und die Lupe war auch nicht da.
Egal:

schwarzer balken unten.
Gehe in die Einstellungen von Socket: General Styling – Socket dort wo du #111111 hast ändere es auf dein #ffffff

Menü Farben:

#top #header .av-main-nav > li > a .avia-menu-text, 
#top #header .av-main-nav > li > a .avia-menu-subtext {
  color: var(--enfold-main-color-primary);
}

#top #header .av-main-nav > li > a:hover .avia-menu-text, 
#top #header .av-main-nav > li > a:hover .avia-menu-subtext {
  color: var(--enfold-main-color-secondary);
}

bei dem Headerlayout würde ich dir raten, bei 990px den Hamburger zu setzen.
Main Menu – General – Menu Items For Mobile …
Lupe entfernen: Main Menu – General – Append Search Icon To Main Menu (uncheck)

danach geht es dann weiter…