grid header – Webers Webdesign

header setting is : logo left – menu right – with one widget.

Best is ava_after_main_menu so widget is sibling to logo and nav container.

a lot of css rules are only needed because on this installation i had on default a shrinking header. This seems to be very difficult to obtain on your responsive settings you need.

For Info see: https://css-tricks.com/snippets/css/complete-guide-grid/

function enfold_customization_header_widget_area() {
	if(is_page(46036)){
	  dynamic_sidebar( 'grid-header' );
	}
}
add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );

/*** name the Grid Areas ***/
#header .logo { grid-area: feld1; justify-self: center;}
#header .main_menu { grid-area: feld2; justify-self: right }
#header .widget { grid-area: feld3; line-height: 1.5em; padding: 0 !important }


#header .inner-container {
  display: grid !important;
  margin: 0;
  gap: 30px;
  grid-auto-flow: row;
  grid-template-columns: 0.7fr 0.9fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "feld3 feld1 feld2";
  justify-content:  space-between;
}

#header .inner-container > * {
  align-self: center;
  position: relative !important;
}

#header .inner-container p {
  padding: 0;
  margin: 0;
}

#top #header .main_menu {
  height: auto !important ;
}

#top #header #avia-menu {
  display: grid !important ;
}

#top #header #avia-menu li a {
  line-height: 36px !important;
  height: auto !important;
  float: right
}


@media only screen and (max-width: 989px) {
  #header {
    position: fixed !important;
    height: 300px !important;
  }

  #header .inner-container {
    gap: 10px 0px;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 3fr !important;
    grid-template-areas: 
      "feld3 feld2"
      "feld1 feld1"
      ;
  }

  #top.page-id-46036 #header #avia-menu {
    height: 100%;
  }

  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
    padding-top: 300px !important;
  }
  #header .logo {
    top: -50px !important;
    position: relative !important;
  }
  #header .inner-container .logo ,
  #header .inner-container .logo a, 
  #header .inner-container .logo img,
  #header .inner-container .logo svg {
    overflow: visible;
    width: 250px !important;
    height: 250px !important;
    max-height: unset !important;
  }
}

@media only screen and (max-width: 767px) {
  #header .inner-container {
    gap: 10px 0px;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 2.2fr !important;
    grid-template-areas: 
    "feld3 feld2"
    "feld1 feld1";
  }
  .responsive #top #wrap_all .container {
    width:95%;
    max-width:95%;
  }
  #header .logo {
    top: -40px !important;
    position: relative !important;
  }
  #header .inner-container .logo, 
  #header .inner-container .logo a, 
  #header .inner-container .logo img,
  #header .inner-container .logo svg {
    width: 230px !important;
    height: 230px !important;
  }
}

@media only screen and (max-width: 467px) {
  #header .logo {
    top: -15px !important;
    position: relative !important;
  }
  #header .inner-container .logo, 
  #header .inner-container .logo a, 
  #header .inner-container .logo img,
  #header .inner-container .logo svg {
    width: 210px !important;
    height: 210px !important;
  }
}

/* === hide header settings === */

#top #header {
  box-shadow: 0px 3px 5px -2px #fff;
}

.responsive:not(.av-burger-overlay-active) #header {
  top: 0px;
  -webkit-transition: transform 1s ease-in;
  transition: transform 1s ease-in;
}

.responsive:not(.av-burger-overlay-active) #header.hide-header {
  -webkit-transition: transform 1s ease-in;
  transition: transform 1s ease-in;
}

.responsive:not(.av-burger-overlay-active) #main {
  top: 0px;
  -webkit-transition: padding-top 1s ease-in;
  transition: padding-top 1s ease-in;
}

.responsive.av-burger-overlay-active #header {
  position: fixed !important;
}

@media only screen and (min-width: 990px) {
  .responsive:not(.av-burger-overlay-active) #header.hide-header {
     transform: translateY(-110px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive:not(.av-burger-overlay-active) #header {
    position: fixed !important;
    top: 0;
  }
  .responsive:not(.av-burger-overlay-active) #header.hide-header {
     transform: translateY(-310px);
  }
  .responsive #top #main {
     padding-top: 90px !important;
  }
  .responsive #top .header_bg {
    background-color: #FFF ;
  }
}

@media only screen and (max-width: 767px) {
  .responsive:not(.av-burger-overlay-active) #header {
    position: fixed !important;
    top: 0;
  }
  .responsive:not(.av-burger-overlay-active) #header.hide-header {
     transform: translateY(-310px);
  }
  .responsive #top #main {
     padding-top: 80px !important;
  }
  .responsive #top .header_bg {
    background-color: #FFF ;
  }
}

Latest News