title: How to stop my Hamburger menu from jumping me to the top of my page on click.
body: <p>When I click my hamburger icon, my menu appears but it also jumps me to the top of the page. I would like to stay where I am at on the page. My header is fixed and the page seems to begin scrolling before the menu even shows. Is this possible to be fixed without using any javascript. If I have to am fine with it.</p>
  
  <pre><code>    &lt;header&gt;
      &lt;div&gt;
      &lt;img src="images/logo.png"&gt;
      &lt;/div&gt;
  
      &lt;input id="burger" type="checkbox" /&gt;
  
      &lt;label for="burger"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
       &lt;/label&gt;
  
      &lt;nav&gt;    
      &lt;ul&gt;
           &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link #3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;  
       &lt;/nav&gt;
      &lt;/header&gt;
  
      a {
      text-decoration: none;
      }
      header img {
      position: fixed;
      top: 40px;
      left: 40px;
      z-index: 6;
      width: 150px;
      }
  
      header input + label {
      position: fixed;
      top: 40px;
      right: 40px;
      height: 20px;
      width: 15px;
      z-index: 5;
      }
      header input + label span {
      position: absolute;
      width: 100%;
      height: 2px;
      top: 50%;
      margin-top: -1px;
      left: 0;
      display: block;
      background: #020304;
      transition: 0.5s;
      }
      header input + label span:first-child {
      top: 3px;
      }
      header input + label span:last-child {
      top: 16px;
      }
      header label:hover {
      cursor: pointer;
      }
      header input:checked + label span {
      opacity: 0;
      top: 50%;
      }
      header input:checked + label span:first-child {
      opacity: 1;
      transform: rotate(405deg);
      }
      header input:checked + label span:last-child {
      opacity: 1;
      transform: rotate(-405deg);
      }
      header input ~ nav {
      background: white;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      z-index: 3;
      transition: 0.5s;
      transition-delay: 0.5s;
      overflow: hidden;
      }
      header input ~ nav &gt; ul {
      text-align: center;
      position: absolute;
      top: 35%;
      left: 20%;
      right: 20%;
      list-style-type: none;
      }
      header input ~ nav &gt; ul &gt; li {
      opacity: 0;
      transition: 0.5s;
      transition-delay: 0s;
      }
      header input ~ nav &gt; ul &gt; li &gt; a {
      text-decoration: none;
      text-transform: uppercase;
      color: #020304;
      font-weight: 700;
      font-family: sans-serif;
      display: block;
      padding: 30px;
      }
      header input:checked ~ nav {
      height: 100%;
      transition-delay: 0s;
      }
      header input:checked ~ nav &gt; ul &gt; li {
      opacity: 1;
      transition-delay: 0.5s;
      }
  </code></pre>