Responsive Jquery Nav issues

I am building a site for a client and I have the majority of it done the nav on the desktop layout works but the nav on the mobile view selects the contact page no matter what link you click.

This is my html code

<div class="deco"> <div class="menu_container"> <div class="center_menu"><div class="logo"><img src="Images/Logo/logo_desktop copy.png"></div> <nav class="mobile"><ul> <li><a href="index.html">Home</a></li> <li><a href="capabilities.html">Capabilities</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact</a></li> </ul></nav> </div></div> </div> <header> <img src="Images/Logo/logo_desktop copy.png" class="logo-mobile"> <div id="openMenu"><img src="Images/menu.png" class="menuPic"></div> </header> <div class="mobile_menu"> <div id="closeMenu"><img src="Images/menu.png" class="menuPic"></div> <nav class="mobile"><ul> <li><a href="index.html">Home</a></li> <li><a href="capabilities.html">Capabilities</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact</a></li> </ul></nav> </div>

and this is my javascript code

$('nav').hide();
var $menu=$('.mobile');
$('#closeMenu').hide();


$( "#openMenu" ).click(function() {

  $menu.slideToggle( "slow", function() {
    $('header').hide();

    $('#closeMenu').show();
  })
});

$( "#closeMenu" ).click(function() {
  $('header').show();
  $('#openMenu').show();
  $('#closeMenu').hide();
  $menu.slideToggle( "slow", function() {

  })
});