Smart Phone Fixed Nav Bar Not Closing after selection

Question

I have got some great info from this forum and this is my first question so be nice..

I have a top nav bar which is fixed.

The fixed part seems to be working fine but i now have two issues.

In responsive mode when you click the hamburger icon it opens beautifully and you can jump to any anchor on the page ( i am designing a 1 page site). But the nav wont close upon click or tap so i am left with a gaping open nav.

Second problem is when the nav is fixed and i scroll down and go over a form the form fields are displayed on top of the nav bar, in both 960 width & responsive.

I have attached what i think is the code here and any advice would be greatly appreciated.

Cheers Max

This is the html:

<nav class="clearfix">
<ul class="clearfix">
    <li><a href="index.html"><span style="color:white">Home</a>
    </li>
    <li><a href="book.html"><span style="color:white">Book</a>
    </li>
    <li><a href="#join"><span style="color:white">Join</a>
    </li>
    <li><a href="contact.html"><span style="color:white">Contact</a>
    </li>
   </ul>
   <a href="#" id="pull"><span style="color:white">Menu</span></a>

This is the css:

/* Clearfix */

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */

nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/

@media screen and (max-width: 600px) {
nav {
    height: auto;
}
nav ul {
    width: 100%;
    display: block;
    height: auto;
}
nav li {
    width: 50%;
    float: left;
    position: relative;
}
nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
}
nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/

@media only screen and (max-width: 600px) {
nav {
    border-bottom: 0;
}
nav ul {
    display: none;
    height: auto;
}
nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content: "";
    background: url('../images/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}
}
/*Smartphone*/

@media only screen and (max-width: 320px) {
nav li {
    width: 50%;
    float: left;
    position: relative;
}
nav li a {
    border-bottom: 1px solid #576979;
}
}

This is the java script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

    $(function() {
        var pull = $('#pull');
        menu = $('nav ul');
        menuHeight = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function() {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });


</script>

Answer 1

For first question add this js:

$('nav li>a').on('click', function (e) {
   if($(window).width()<600){
     menu.slideUp();
   }
 });

the full code is below:

$(function() {
  var pull = $('#pull');
  menu = $('nav ul');
  menuHeight = menu.height();

  $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });

  $('nav li>a').on('click', function(e) {
    if ($(window).width() < 600) {
      menu.slideUp();
    }
  });

  $(window).resize(function() {
    var w = $(window).width();
    if (w > 320 && menu.is(':hidden')) {
      menu.removeAttr('style');
    }
  });
});

/* Clearfix */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* Basic Styles */

nav {
  height: 40px;
  width: 100%;
  background: #455868;
  font-size: 1em;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  position: fixed;
  border-bottom: 2px solid #283744;
  text-align: center;
  z-index: 99;
}
nav ul {
  padding: 0;
  margin: 0 auto;
  width: auto;
  height: 40px;
}
nav li {
  display: inline;
  float: none;
}
nav a {
  color: #fff;
  display: inline-block;
  width: 120px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  text-shadow: 1px 1px #303030;
}
nav li a {
  border-right: 1px solid #576979;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
nav li:last-child a {
  border-right: 0;
}
nav a:hover,
nav a:active {
  background-color: #8c99a4;
}
nav a#pull {
  display: none;
}
/*Styles for screen 600px and lower*/

@media screen and (max-width: 600px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: block;
    height: auto;
  }
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
  }
  nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
  }
}
/*Styles for screen 515px and lower*/

@media only screen and (max-width: 600px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
  }
  nav a#pull:after {
    content: "";
    background: url('../images/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}
/*Smartphone*/

@media only screen and (max-width: 320px) {
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #576979;
  }
}

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="index.html"><span style="color:white">Home</a>

    </li>
    <li><a href="book.html"><span style="color:white">Book</a>

    </li>
    <li><a href="#join"><span style="color:white">Join</a>

    </li>
    <li><a href="contact.html"><span style="color:white">Contact</a>

    </li>
  </ul> <a href="#" id="pull"><span style="color:white">Menu</span></a>

</nav>

ul>li>a can be changed with a ID or class as you prefer.

For 2nd question add this css:

nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}

DEMO