header{ max-height: 100px; .row{ background: white; max-height: inherit; justify-content: space-between; #block-popsu-colloque-branding{ max-height: inherit; & > div{ max-height: inherit; a{ display: block; max-height: inherit; img{ width: 100%; max-height: inherit; object-fit: contain; padding-bottom: 0.5rem; padding-top: 0.5rem; @media screen and (min-width: 450px) { width: auto; } } } } &.is-active{ z-index: 10000; } } #block-renderedsitesettingsblock-2{ width: auto; border-left: 1px solid $color1; padding: 0; display: none; @media screen and (min-width: 1200px) { display: flex; } .site_setting_entity{ display: flex; align-items: center; justify-content: center; padding: 0 1rem 0 0rem; h1{ max-width: 100%; color: $color2; padding-right: 1rem; text-transform: uppercase; text-align: right; align-self: stretch; margin: auto 0; width: 100%; } .__info_colloque{ width: 100%; align-self: stretch; margin: auto 0; height: 7vw; height: auto; &>div{ &:first-child{ white-space: nowrap; border-bottom: 2px solid $color1; } } } } } #block-mainnavigation{ // max-width: max-content; width: max-content; .burger{ padding-top: 0.25rem; z-index: 9999; } .nav-main{ display: none; @media screen and (min-width: 1200px) { display: block; ul{ margin-bottom: 0; li{ margin: 0 0.5rem; } } } &.is-active{ display: block; position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; background: white; z-index: 9999; @media screen and (min-width: 576px) { height: auto; ul{ margin: 130px 0 50px 0; } li{ font-size: 1.7rem; line-height: 3rem; padding: 0 15px; } } ul{ display: flex; justify-content: center; flex-direction: column; height: 100%; align-items: center; li{ font-size: 1.5rem; line-height: 3rem; padding: 0 15px; @media screen and (min-width: 360px) { width: 100%; &::before{ display: inline-block; content: " "; width: 0%; transition: width 1s ease; height: 1px; background: $color1; } &:hover{ &::before{ width: 10%; transition: all 1s ease; } } } } } } } } } } #block-mainnavigation{ border-left: 1px solid $color1; display: flex; align-items: center; justify-content: flex-end; .burger{ display: block; margin: auto; @media screen and (min-width: 1200px) { display: none; } &.is-active{ z-index: 999; } } .nav-main{ display: none; height: auto; @media screen and (min-width: 1200px) { display: flex; } } } header.front{ #block-popsu-colloque-branding{ width: 21rem; position: relative; z-index: 9999; a{ max-height: 8rem!important; } &.is-active{ overflow: inherit; &>div{ max-height: 115px; } } } #block-renderedsitesettingsblock-2{ display: none; } }