enfold header layout: widget left, logo center, widget right, menu below

remove the flex settings given to you by docu.
maybe test these settings first on dev tools insertion:

try:

/*** Naming of the Grid Areas ***/
#header_main #media_image-3 { grid-area: area1; }
#header_main #media_image-4 { grid-area: area2; }
#header_main #text-3 { grid-area: area3; text-align: right }
#header_main div.av-logo-container { grid-area: area4; display: grid; justify-content: center }

#header_main {
  margin: 0;
  display: grid;
  gap: 20px 40px;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr;   
  grid-template-areas:
    "area1 area2 area3"
    "area4 area4 area4";
  justify-content: stretch;
  align-items: center;
}

#header_main > div {
  justify-self: center;
  align-self: center;
  padding: 0 30px;
}

@media only screen and (max-width: 1119px) {
  #header_main {
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 0.5fr 1fr auto ;
    grid-template-areas:
      "area2 area2"
      "area1 area3"
      "area4 area4";
  }
  #header_main #media_image-4 { transform:scale(1.2) }
}

@media only screen and (max-width: 989px) {
  #header_main {
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 0.3fr 1fr;
    grid-template-areas:
      "area2 area2 area2 area4"
      "area1 area1 area3 area3";
  }
  
  #header_main #media_image-3 { transform:scale(0.8) }
  #header_main #text-3 { transform:scale(0.8); padding: 0;}
  #header_main div.av-logo-container {display: grid; justify-content: center; background-color: transparent }

  #header_main div.av-logo-container {
    display:  block ; 
  }

  #header_main .av-main-nav-wrap {
    float: right;
    padding-right: 50px;
  }
  
  #top #av-burger-menu-ul {
    padding-top: 120px !important;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .main_menu {
    position: relative;
  }  
  #header_main #media_image-4 { transform:scale(1); justify-self: start; padding-left: 50px }
  .responsive #top .logo {display: none;}
}

• This reply was modified 1 week, 6 days ago by Guenni007.
• This reply was modified 1 week, 6 days ago by Guenni007.