title: Need a fixed navbar and landing page VH that incorporates navbar height
body: <p>I am working on my first portfolio and running into some trouble doing two things. </p>
  
  <ol>
  <li><p>Creating a fixed navbar. When I use position: fixed; it clears my float on the right "Contact Me", and everything collapses. I need this to stay spaced how it is in my example. Searched for quite some hours and I cannot find a fix as of yet, although I am a novice so I am sure that plays into this some as well.</p></li>
  <li><p>For my landing page photo, I am trying to make a responsive design that allows it to resize to 100% of the available page size. I had implemented this with height: 100vh; however quickly noticed that it is taking the 100vh, and implementing this after my navbar, which leaves excess below. I tried to compensate by reducing the vh to account for the navbar, but of course I realized that this would not be a good fixed as it would only work for that viewport height, and not scale accordingly.
  This leaves me either needing a fix to scale the content appropriately, or allow the photo to slide under the navbar, and occupy that space as well so that it is touching the top of the page.</p></li>
  </ol>
  
  <p>Relevant HTML:</p>
  
  <pre><code>    &lt;header&gt;
        &lt;div class="navbar"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#home" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#aboutme"&gt;About Me&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#mywork"&gt;My Work&lt;/a&gt;&lt;/li&gt;
            &lt;li style="float:right"&gt;&lt;a href="#contact"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/div&gt;
     &lt;/header&gt;
     &lt;main&gt;
       &lt;section class="homeLanding"&gt;
         &lt;h1&gt;Hi, I'm Michael.&lt;/h1&gt;
         &lt;p&gt;A Front-End Web Dev&lt;/p&gt;
         &lt;a href="#aboutMe" class="myBtn"&gt;Start here to learn more about me,
         &lt;br&gt;and how I can help you&lt;/a&gt;
       &lt;/section&gt; 
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>body {
     margin: 0;
  }
  
  /** style navbar **/
  .navbar ul {
     background-color: #333;
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden
  }
  .navbar li {
     float: left;
  }
  .navbar li a {
     display: block;
     text-align: center;
     text-decoration: none;
     color: white;
     padding: 14px 16px;
  }
  .navbar li a:hover:not(.active) {
     background-color: #111;
  }
  .active {
     background-color: #4CAF50;
  }
  
  /** style landing page **/
  .homeLanding {
     height: 100vh;
     width: 100%;
     margin: auto;
     background: url(/**Insert Image**/);
     display: flex;
     background-size: cover;
     background-position: center;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     top: 0;
  }
  .myBtn {
     color: white;
     text-decoration: none;
     border: solid 3px white;
     border-radius: 6px;
     padding: 7px 7px 0px 7px;
  }
  p, h1 {
     color: white;
  }
  </code></pre>
  
  <p>Background image: <a href="http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg" rel="nofollow noreferrer">http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg</a></p>