Hamburger menu for mobile view

nav .awesome{
font-size:
color:
float:
padding:
border-width:
border-style:
border-radius:
border-color:
}

nav ul{
clear:
display:
}

nav ul li a{
text-decoration:
color:
display:
text-shadow:
}

nav ul li{
list-style-type:
background-color:
text-align:
padding:
border-color:
border-width:
border-style:
}

nav ul li:first-child{
border-width:
}

@media screen and (min-width: 600px){

nav .awesome{
display:
}

nav ul{
display:
}

nav {
background-color:
}

nav ul li{
display:
padding:
margin:
border-width:
width:
}
}


  <nav>
      <div class='awesome'><i class="fas fa-bars"></i></div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
  </nav>


  $('.awesome').click(function(){
    if($(this).hasClass('open')){
      $(this).removeClass('open');
      $('nav ul').slideUp('slow');
    }else{
      $(this).addClass('open');
      $('nav ul').slideDown('slow');
    };
  });