nuitdelinfo_2021/static/scss/layouts/nav.scss

nav{
  background-color: $background2;
  padding: 5px 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 9990;
  left: 0;
  width: -webkit-fill-available;
  .logo{
    margin: 0;
    cursor: pointer;
    font-size: 50px;
    @include font-courgette;
    color: $accent;
    margin-right: 30px;
  }
  .left{
    display: flex;
    align-items: center;
    .submenu{
      display: flex;
      align-items: center;
      a{
        font-size: 20px;
        color: $light;
        padding: 0 20px;
      }
    }
  }
  .right{
    display: flex;
    justify-content: right;
    align-items: center;
    .opennavmobile{
      display: none;
      cursor: pointer;
      font-size: 60px;
      color: $light;
    }
    img{
      width: 50px;
      cursor: pointer;
      border: 2px solid $light;
      transition-duration: 0.3s;
      &:hover{
        border-color: $accent;
      }
    }
    .search{
      color: $light;
      font-size: 50px;
      margin-right: 20px;
      cursor: pointer;
      transition-duration: 0.3s;
      &:hover{
        color: $accent;
      }
    }
  }
}

.navbar-mobile{
  &.open{
    transform: translateX(0) !important;
  }
  display: none;
  transform: translateX(100%);
  .closenavmobile{
    position: fixed;
    top: 20px;
    right: 20px;
    color: $light;
    font-size: 70px;
    cursor: pointer;
  }
  position: fixed;
  width: 100%;
  transition: all ease-in-out 0.3s;
  align-items: center;
  height: 100vh;
  background: $background2;
  top: 0;
  left: 0;
  justify-content: center;
  flex-direction: column;
  z-index: 9998;
  a{
    font-size: 35px;
    padding: 30px 0;
  }
  i{
    font-size: 50px;
  }
}

@media all and (max-width: 800px){
  .navbar-mobile{
    display: flex !important;
  }
  nav .left .submenu, nav .right a{
    display: none;
  }

  nav .opennavmobile{
    display: block !important;
  }
}