Burger Nav - JSFiddle - JSFiddle

Trying to make this nav mobile friendly

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

   <p class="toggles">
   <span class="spanish">spanish</span> | <span class="english active">english</span>
        </p>

     <nav>
         <a class="burger-nav"></a>
        <ul class="englishNav">
            <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>
         <ul class="spanishNav">
            <li><a href="#">Homeo</a></li>
            <li><a href="#">Abouto</a></li>
            <li><a href="#">Serviceso</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </nav>
        
        <div class="englishText">
  <p style="color:white;">
  Biscuits and Tea
  </p>
  </div>
  
  
 <div class="spanishText">
 <p>
 Borritos and coronas
 </p>
 </div>

CSS

.englishText {
  width:300px;
  height:300px;
  background-color: #000;
  margin-top:100px;
}
.spanishText {
  display:none;
  width:300px;
  height:300px;
  background-color: #fff;
  margin-top:100px;
}

.spanish{
  cursor:pointer;
}

.toggles span:active{
  text-decoration: underline;
}
.spanish:hover {
    cursor:pointer;
    text-decoration: underline;
}

.english:hover {
	cursor:pointer;
    text-decoration: underline;

}

.spanish:active {
    text-decoration:underline;
}


.active {
    text-decoration:underline;
}

.spanishNav {
  display:none;
}
.english{
  cursor:pointer;
}

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:100px;
        margin-right: 100px;
        opacity:0.6;
        width:200px;
    }
     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");
  });

$('.toggles span').click(function() {
	$(".toggles span").removeClass("active");
  $(this).addClass("active");
});
  
  $(".spanish").on("click", function() {
    $(".englishNav").hide();
    $(".spanishNav").show();

  });

  $(".english").on("click", function() {
    $(".englishNav").show();
    $(".spanishNav").hide();
  });
	$(".spanish").on("click", function() {
    $(".englishText").hide();
    $(".spanishText").show();
  });

$(".english").on("click", function() {
    $(".englishText").show();
    $(".spanishText").hide();
  });
});