Burger Nav

Trying to make this nav mobile friendly

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
   <div class="container">
    <nav>
       <a class="burger-nav"></a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    </div>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>

CSS

nav {
    float: right;
    padding-right: 10%
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
}

nav li {
    display: inline-block;
    margin-left: 35px;
    padding-top: 25px;
    
    position: relative;
    
}

nav a {
    color: #444;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
}


     
    .burger-nav{
    display: block;
    height: 40px;
    width: 40px;
    float: right;
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
    background-size: cover;
    cursor: pointer;
    }
    
   .wrapper {
        width: 100%;
        padding: 0;
    }
    
     nav ul {
        overflow: hidden;
        background: white;
        height:0;
        
    }

    nav ul.open {
        height: auto;
        margin-top:150px;
        margin-right: 100px;
    }
     nav ul li{
        float:none;
        text-align: left;
        width: 100%;
        margin: 0;
        
    }
    nav ul li a {
        color: black;
        padding: 10px;
        border-bottom: 1px solid #404040;
        display: block;
        margin: 0;
    }

JavaScript

$(document).ready(function(){
    
        $(".burger-nav").on("click", function(){
            
            $("nav ul").toggleClass("open");
        });
});