/* ==== Naming grid items to facilitate placement in the grid ==== */
#header_main .av-logo-container .widget { grid-area: widget; }
#header_main .av-logo-container .logo {grid-area: logo;}
#header_main .av-logo-container .main_menu {grid-area: nav; }
/* ==== starting the layout of the header ==== */
#header_main .inner-container {
display: grid !important;
grid-auto-flow: row;
/* ==== adjust first value to your logo width - last value if your menu is a larger one ==== */
grid-template-columns: 400px 1fr 1fr;
grid-template-areas:
"logo widget nav";
}
#header_main > * {
justify-self: start;
align-self: center;
}
#header_main .widget {
justify-self: center;
margin-right: 0px;
padding: 0;
}
#header_main #header_main_alternate {
width: 100%;
}
#header_main #header_main_alternate .main_menu {
width: auto;
}
/* responsive case */
@media only screen and (max-width: 989px) {
.responsive #top #wrap_all #header .container {
width: 95%;
max-width: 95%;
}
#header_main .inner-container {
grid-template-columns: 1fr 1fr 80px;
}
}
@media only screen and (max-width: 501px) {
.responsive #header_main .inner-container {
display: flex !important;
flex-flow: row wrap-reverse;
justify-content: space-between;
}
#header_main .inner-container > * {
height: 80px !important;
line-height: 80px !important;
}
#header_main .inner-container .widget,
#header_main .inner-container .main_menu {
flex: 0 1 auto;
}
#header_main .inner-container .logo {
flex: 1 1 100%;
display: flex;
justify-content: center;
height: auto !important;
}
#header_main .inner-container .av-burger-menu-main > a {
position: relative;
line-height: 80px !important;
height: 80px !important;
}
}