<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contacts</li>
    <li>Magic</li>
    <li>Settings</li>
  </ul>
</nav><div class="bodyContainer">
  <h1>Navigation.</h1>
  <h4>By <a href="https://www.linkedin.com/in/giorgioacquati/">Giorgio Acquati.</a></h4>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio modi eligendi eveniet ullam maiores esse dolor illo voluptatum placeat doloribus obcaecati ab cum, magnam officia quis explicabo vel mollitia enim.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, nam quas? In sint enim libero repellendus? Quis dicta, repellendus consequatur ratione, asperiores ut incidunt aperiam voluptates tempora cum sunt ex!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam cupiditate, libero odio quam deserunt expedita excepturi aliquid odit, error a quas. Ullam inventore earum sed eaque natus sequi, distinctio minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptatem delectus harum quis minus sed optio, laudantium, qui quo incidunt vitae, doloremque nostrum quidem magnam facilis explicabo impedit nemo. Dolore.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet possimus incidunt laboriosam nostrum officiis quaerat deleniti quisquam neque? Similique, assumenda saepe. Consequatur reiciendis atque eligendi quia veniam iusto minus praesentium!</p>
</div>
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>

$raisinblack: #262626;
$isabelline: #fafafa;
$accent: #00c7be;

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 24px;
  font-family: sans-serif;
}

body {
  background-color: $accent;
}

nav {
  position: fixed;
  height: 100%;
  width: 65%;
  &::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
  > ul {
    width: 80%;
    display: inline-block;
    vertical-align: middle;
    > li {
      display: block;
      text-transform: uppercase;
      line-height: 2;
      font-size: .8rem;
      padding-left: 30%;
    }
  }
}

.hamburger {
  left: 1rem;
  top: 1rem;
  width: 1.5rem;
  height: .7rem;
  position: fixed;
  z-index: 2;
  cursor: pointer;
  > span {
    display: block;
    background-color: $raisinblack;
    height: 20%;
    margin-bottom: 20%;
  }
  
  
  
}
.bodyContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $isabelline;
  color: $raisinblack;
  padding: 4rem;
  overflow: auto;
  transition: .2s ease;
  
  @media screen and (orientation: portrait) {
    padding: 4rem 1rem;
  }
  
  a {
    color: $accent;
  }
  
  > p {
    padding-bottom: 1em;
  }
  
  > h4 {
    margin: 1em 0;
  }
  
}

@media screen and (orientation: portrait) {
  nav.active + .bodyContainer {
    transform: translateX(55%) scale(.8);
    box-shadow: 0 0 30px 5px rgba($raisinblack, .3);
  }
}

@media screen and (orientation: landscape) {
  nav.active + .bodyContainer {
    transform: translateX(35%) scale(.8);
    box-shadow: 0 0 30px 5px rgba($raisinblack, .3);
  }
}

$(".hamburger").click(function() {
  $("nav").toggleClass("active");
})