Popsu-coloque/web/themes/custom/popsu_colloque/css/components/header/header.scss

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;
        }
      }
    }
  }
}