title: I need the logo to overlap the navbar
body: <p>I want the logo to overlap my navbar like this:
  <br><br>
  <a href="https://i.stack.imgur.com/Gz6rj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gz6rj.jpg" alt="enter image description here"></a></p>
  
  <p>So far I have this:
  <a href="https://i.stack.imgur.com/lb3sr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lb3sr.png" alt="enter image description here"></a> </p>
  
  <p>As you can see the logo just make the navbar bigger, how do I make the logo overlap the navbar?
  The codepen is <a href="https://codepen.io/anon/pen/NvqbLo" rel="nofollow noreferrer">https://codepen.io/anon/pen/NvqbLo</a> </p>
  
  <p>I think the problem is with the CSS: </p>
  
  <pre><code>.topnav a {
    float: left;
    display: block;
    color: #777;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  </code></pre>