header{ padding: 0; height: 100px; // display: none; div { height: inherit; } } #block-popsu-colloque-branding{ width: 100%; position: relative; // z-index: 999; padding:0; @media screen and (min-width: 992px) { padding:0 1rem; } &.is-active{ z-index: 10000; } & > div { display: flex; padding:1rem 0.5rem; & > a{ display: inline-block; position: relative; img{ width: auto; height: 100%; object-fit: contain; @media screen and (min-width: 768px) { width: 100%; } } } } } #block-renderedsitesettingsblock-2{ width: auto; border-left: 1px solid $color1; padding: 0; display: none; min-width: 520px; @media screen and (min-width: 768px) { display: block; } .site_setting_entity{ display: flex; align-items: center; justify-content: center; padding: 0 1rem; 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{ width: 100%; border-left: 1px solid $color1; padding: 0rem; display: flex; align-items: center; justify-content: flex-end; @media screen and (min-width: 1200px) { min-width: auto; padding: 2rem; } .burger{ display: block; @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; } @media screen and (max-width: 1200px) { &.is-active{ display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 999; ul{ display: flex; justify-content: center; flex-direction: column; height: 100%; align-items: center; li{ width: 100%; font-size: 2rem; line-height: 3rem; display: inline-flex; align-items: center; padding: 0 5%; &::before{ display: block; content: " "; width: 0%; transition: width 1s ease; height: 1px; background: $color1; } &:hover{ &::before{ width: 10%; transition: all 1s ease; } } a{ min-width: max-content; margin: 0 1rem; } } } } } ul{ flex-wrap: nowrap; li{ padding: 0 0.5rem; &:not(:last-child){ border-right: 1px solid $col_black; } a{ white-space: nowrap; } } } } } .site_setting_entity{ img{ width: 50%; height: auto; } } header.front{ #block-popsu-colloque-branding{ width: 100%; position: relative; z-index: 999; padding: 1rem 0 0 0; & > div { & > a{ display: inline-block; height: 8rem; max-height: 150px; position: relative; img{ width: auto; height: 100%; object-fit: contain; } } } } }