title: How to lay my nav bar over image?
body: <p>I am trying to lay my lay my nav bar (@media min width 50em) over my my mainimage.  I have tried using mainimage as a background url to my navbar but it I cannot adjust the height.  Is there a way to just push mainimage to the top of page and have my nav bar lay over the top of it?  </p>
  
  <p>Here is a link to my jsfiddle: </p>
  
  <p><a href="https://jsfiddle.net/shannonhart82/93ekqmhq/1/" rel="nofollow noreferrer">https://jsfiddle.net/shannonhart82/93ekqmhq/1/</a>                                                                         </p>
  
  <pre><code>  &lt;nav&gt;
        &lt;ul&gt;
  
           &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt; &lt;/li&gt;
           &lt;li&gt;&lt;a href="#menu"&gt;Menu&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img class="logo" src="fjc.svg"&gt;&lt;/li&gt;
  
  
           &lt;li&gt;&lt;a href="#gallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/nav&gt;
  
  
  
  
       &lt;img class="mainimage" src="http://www.andypost.com/media/original/Andy- Post-Food-Photography-Waffle-with-Syrup.jpg" width="100%"&gt;
  
  
     nav li a {
       display: inline-block;
       background-color: #9CD5CF;
       top: 0;
       padding: 70px;
       width: 150px;
       text-decoration: none;
       color: #000;
     }
     #nav-icon3 {
       display: none;
     }
     nav {
       display: block;
       width: 100%;
       position: relative;
       top: 0;
       left: 0;
     }
     nav li {
       display: inline-block;
       background-color: none;
       color: black;
       text-align: center;
       vertical-align: middle;
     }
     nav ul {
       text-align-last: center;
     }
  </code></pre>
  
  <p>Here is what I am trying to do:</p>
  
  <p><img src="https://i.stack.imgur.com/sNKlS.jpg" alt="img"></p>