#hamburgerArea{
 display:none;
}
.navi{
 display:block;
}
@media screen and ( max-width:420px )
{
.navi{
 display:none;
}

#hamburgerArea{
 display:block;
 text-align: left;
}
#hamburgerArea div {
  position: relative;
}

#hamburger {
  cursor: pointer;
}

#hamburgerMenu{
  display: none;
  position: absolute;
}

#hamburger {
  position: relative;
  height: 36px;
  width: 36px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #fff;
  border: 2px solid #444;
  border-radius: 4px;
}
#hamburger div {
  position: absolute;
  left: 4px;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
}
#hamburger div:nth-of-type(1) {
  top: 4px;
}
#hamburger div:nth-of-type(2) {
  top: 14px;
}
#hamburger div:nth-of-type(3) {
  bottom: 4px;
}
}