Problems with a responsive navigation bar

Question

I've been trying to build a responsive navigation bar. I'm using a <nav> element that contains an <img> and a <ul> element. I have set up media queries so that when the screen is resized, some of the <li> elements are hidden with the display: none property. The problem occurs when I click on the menu icon. It's supposed to display the hidden menu items but it doesn't. Could someone please have a look at the fiddle and tell me what I'm doing wrong? Thanks in advance.

UPDATE:
Sorry, I'm still learning the ropes. Could you please give me instructions if I do something incorrectly instead of downvoting me immediately? Thanks.
Here is my code:

 function myFunction() { var x = document.getElementById("myNav"); if (x.className === "nav") { x.className += " responsive"; } else { x.className = "nav"; } } 

 body { background-image: url("home/pexels-photo-4.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .header { background-color: rgba(0,0,0,0.6); } .logo { width: 150px; height: 110px; margin-left: 50px; } .nav { float: right; padding-top: 50px; margin-right: 50px; } .nav li { float: left; padding: 0 10px; } .nav li a { color: #fff; text-decoration: none; font-family: "Raleway"; font-size: 16px; font-weight: 600; } ul.nav li a:hover, ul.nav li a:focus { background-color: transparent; color:#fff; } ul.nav a:hover:before, ul.nav li a:focus:before { width:100%; background:#fff; } ul.nav a:before { content:''; height:2px; width:0; position:absolute; top:auto; right:auto; bottom:0; left:50%; -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); -webkit-transition:.4s; transition: .4s; } .nav li.icon { display: none; } @media screen and (max-width:765px) { .nav li:not(:first-child) { display: none; } .nav li.icon { float: right; display: inline-block; } } @media screen and (max-width:765px) { ul.nav .responsive { position: relative; } ul.nav .responsive li.icon { position: absolute; right: 0; top: 0; } ul.nav .responsive li { float: none; display: inline; } ul.nav .responsive li a { display: block; text-align: left; } } @media screen and (max-width: 500px) { .nav { padding-top: 20px; } .nav li a { font-size: 14px; } .logo { margin: 0; width: 110px; height: 70px; } } 

 <nav class="header"> <img class="logo" src="images/logos/marcon logo white on trans copy 2.png"> <ul class="nav" id="myNav"> <li><a href="#"><span class="glyphicon glyphicon-home" aria-label="Home"></span></a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> <li class="icon"> <a href="#" onclick="myFunction()">&#9776;</a> </li> </ul> </nav> 

Answer 1

The problem is in CSS. You wrote

ul.nav .responsive li

but since your function gives the "responsive" class to the ul element with the "nav" class you need to get rid of the space to declare that it is the ul element with both the "nav" and "responsive" classes:

ul.nav.responsive li

Answer 2

For starters you have an extra closing body tag within your HTML. I would add a event listener to target the click of your logo, then add the function toggleBody which allows you to open and close your nav when you click the logo. Your question was vague but what i did understand is that you wanted this event to happen when you clicked the logo.

document.getElementsByClassName('logo').addEvenetListener('click', toggleBoy)
      function toggleBody() { 
        var showElements = this.querySelectorAll('.nav')[0];
             if(showElements.style.display === 'none') {
                 showElements.style.display = 'block';
             }else{
                 showElements.style.display = 'none';
             }