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: 35%; border-left: 1px solid $color1; padding: 0; display: none; a{ display: flex; } @media screen and (min-width: 1200px) { display: flex; } .site_setting_entity{ display: flex; align-items: center; justify-content: flex-start; padding: 0 1rem 0 0rem; h1{ width: 100%; color: $color2; padding-right: 1rem; text-transform: uppercase; text-align: right; align-self: stretch; margin: auto 0; } .__info_colloque{ width: 50%; height: auto; display: flex; flex-direction: column; // justify-content: space-between; &>div{ height: auto; &:first-child{ color: $color1; white-space: nowrap; border-bottom: 2px solid $color1; padding-bottom: 0.4rem; margin-bottom: 0.6rem; } &:last-child{ color: $color2; padding-right: 10px; width: min-content; margin-bottom: 0; } } } } } #block-mainnavigation{ 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; flex-wrap: wrap; li{ margin: 0 0.5rem; &:not(:last-child){ &:after{ display: inline-block; content: "|"; margin-left: 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; } }