header{ max-height: 125px; .row{ background: white; max-height: inherit; border-bottom: 1px solid black; padding-left: 40px; @media screen and (max-width: 550px) { padding-left: 20px; flex-wrap: nowrap; } @media screen and (max-width: 550px) { flex-wrap: nowrap; } #block-colloque2024-logorepublique, #block-colloque2024-logoepau{ max-height: inherit; & > div{ max-height: inherit; a{ display: block; max-height: inherit; img{ width: auto; height: 125px; padding-bottom: 0.5rem; padding-top: 0.5rem; @media screen and (max-width: 300px) { width: 100px; object-fit: contain; } @media screen and (max-width: 550px) { width: 100px; object-fit: contain; } } } } &.is-active{ z-index: 10000; } } #block-colloque2024-logoepau{ margin-right: 2rem; @media screen and (max-width: 550px) { margin: 0; } } #block-renderedsitesettingsblock-2{ width: 25%; border-left: 1px solid black; padding: 0; justify-content: end; @media screen and (max-width: 300px) { display: none; } @media screen and (max-width: 550px) { align-content: center; } a{ display: flex; margin: auto; margin-left: 1rem; } @media screen and (min-width: 1200px) { display: flex; } .site_setting_entity{ display: flex; flex-direction: column; h1{ order: 2; width: 60%; color: black; padding-right: 1rem; font-size: 1.6rem; text-align: left; margin: auto 0; line-height: 0.95; @media screen and (max-width: 550px) { font-size: 1rem; } } .__info_colloque{ width: fit-content; order: 1; height: auto; display: flex; flex-direction: row; @media screen and (max-width: 550px) { flex-direction: column; } &>div{ height: auto; &:first-child{ order: 2; color: black; white-space: nowrap; font-family: "Mariannebold"; text-transform: uppercase; padding-left: 0.5rem; @media screen and (max-width: 550px) { padding-left: 0; font-size: 0.6rem; } } &:last-child{ order: 1; color: black; width: min-content; margin-bottom: 0; text-transform: uppercase; @media screen and (max-width: 550px) { font-size: 0.6rem; } } } } } } #block-colloque2024-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; font-size: 1.3rem !important; &: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: $color2024; } &:hover{ &::before{ width: 10%; transition: all 1s ease; } } } } } } } } } } #block-colloque2024-mainnavigation{ // border-left: 1px solid black; 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-colloque2024-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; } }