title: Closing hamburger menu from CSS
body: <p>I have a hamburger menu built in CSS but I need it to close when you click a link. It is only a 1 page site with anchor links. I have tried following other peoples problem with this but I cannot get it to work.</p>
  
  <p>Navigation Links</p>
  
  <pre><code>&lt;nav&gt;
    &lt;label for="toggle"&gt;&amp;#9776;&lt;/label&gt;
    &lt;input type="checkbox" id="toggle"&gt;
  
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="/#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/#about"&gt;About us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/#reasons-to-choose-us"&gt;Reasons to choose us&lt;/a&lt;/li&gt;
        &lt;li&gt;&lt;a href="/#contact"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS Desktop</p>
  
  <pre><code>nav {
      float: right;
      margin: 38px 0 34px 10px;
  }
  
  nav ul li {
      display: inline;
  }
  
  nav ul {
      clear: right;
  }
  
  nav li a {
      padding: 28px 35px;
  }
  
  nav li a:focus {
      text-decoration: none;
  }
  
  label {
      margin: 0 30px 0 0;
      font-size:46px;
      line-height: 70px;
      float: right;
      display: none;
  }
  
  #toggle {
      display: none;
  }
  </code></pre>
  
  <p>CSS Mobile</p>
  
  <pre><code>label {
      display: block;
      cursor: pointer;
      padding-top: 7px;
   }
  
   nav li a {
      padding: 15px;
      display: block;
      text-align: center;
      border-bottom: 1px solid #eee;
   }
  
   nav {
      float: none;
      margin: 0;
   }
  
   nav ul li {
      display: none;
   }
  
   nav ul li:hover {
      background: #eee;
   }
  
   nav ul li a:focus {
      background: #eee;
   }
  
   #toggle:checked + ul li {
      display: block;
      cursor: pointer;
    }
  </code></pre>
  
  <p>Having limited coding experience, I am struggling a little with this one.</p>
  
  <p>Thanks</p>