nav i.list{ display: none;} 

@media screen and (max-width: 601px){


nav{
  display: flex !important;
  position: sticky;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: var(--bonesdale-yellow);
  padding: 20px 15px 15px;

  z-index: 1000;
}

nav ul{
  display: block;
  position: absolute;
  background: var(--bonesdale-blue);
  color: var(--bonesdale-yellow);
  height: 100vh;
  border-left: 2px solid var(--bonesdale-red);
  border-bottom: 2px solid var(--bonesdale-red);
  border-right: 2px solid var(--bonesdale-red);
  list-style: none;
  flex-wrap: nowrap;
  flex-direction: column;
  /*margin: 55.2em 0 0 0;*/
  top: 35px;
  transform: translatex(-220px);
  transition: 0.15s linear;
  padding: 0 20px 0 20px;
}

nav{
  justify-content: start;
}

nav .list{
  display: block !important;
  color: var(--bonesdale-red);
  margin: 0 0 0 15px;
  z-index: 10000 !important;
}
    
nav ul li{
  padding: 10px 2px;
}

nav ul li a{
  font-size: large;
  color: var(--bonesdale-yellow);
        
}



.appear{
  transform: translateX(-17px);
  transition: 0.15s linear;

}
  
  
}