.layout-container { width: 100vw; overflow: hidden; header { width: 100vw; background: white; position: fixed; top: 0; left: 0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); z-index: 99; div { max-width: 100%; max-height: 7vh; display: flex; flex-wrap: nowrap; justify-content: space-between; #block-erabletheme-logorepublique { max-width: 15vw; a { display: flex; align-items: center; img { padding-left: $x_margin; height: auto; width: 100%; } } } #block-erabletheme-logoerable { max-width: 30vw; a { display: flex; align-items: center; img { height: auto; width: 100%; padding-top: 3px; padding-bottom: 3px; } } } #block-erabletheme-navigationprincipale { display: none; } #block-erabletheme-socialmedialinks { display: none; } #block-erabletheme-header { #hamburger { width: 4rem; height: 100%; background-color: $fluo_green; display: flex; flex-direction: column; align-items: center; justify-content: space-around; h2 { font-size: $sm_font_size; font-family: 'Marianne', sans-serif; font-weight: 800; text-align: center; } .burger-icon { width: 2rem; height: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0.5rem; div { border-bottom: solid 1px black; width: 100%; background-color: black; opacity: 1; transition: opacity 0.2s ease-out, transform 0.4s ease-out; transform: none; } } .burger-icon.open { div:first-of-type { transform: translate(0rem, 0.5rem) rotate(-45deg); } div:nth-of-type(2) { opacity: 0; } div:last-of-type { transform: translate(0rem, -0.5rem) rotate(45deg); } } } ul { display: none; height: auto; max-height: 0vh; transition: max-height 0.9s ease, padding 0.5s ease-out; position: fixed; background-color: $dark_green; top: 7vh; left: 0; width: 100vw; z-index: 0; padding: 0; li { width: 100%; display: flex; justify-content: center; padding: 6px 0; opacity: 0; transition: opacity 0.3s ease; a { color: white; font-family: 'Marianne', sans-serif; font-weight: 800; padding: 4px 6px; } a.is-active { background-color: white; color: $dark_green; } } li.visible { opacity: 1; } } ul.active { padding: 30px 0; max-height: 100vh; } } } } }