title: Having a difficult time creating a fixed header on scroll. Typical solution is no longer working for me
body: <p>I know this question already exists here but the solutions I've found are not working for me. I had my header fixed at one point but ended up needing to redesign my navigation due to another issue. I attempted to make the header fixed on scroll again but now it behaves in a bizarre manner.  I've tried giving the header a height and using "position: fixed". I've also tried using this in my #nav div and both times the entire navigation and logo shift down and to the left side of the screen and the large image I have beneath the header shifts up and close to the top of the page and beneath the navigation list.  This should be simple and I've wasted another hour trying to correct this. Could I please get some help?  </p>
  
  <pre><code>&lt;header&gt;
          &lt;div id="nav"&gt;
              &lt;div id="nav_left"&gt;
                  &lt;a href="index.html"&gt;HOME&lt;/a&gt;
                  &lt;a href="services.html"&gt;SERVICES&lt;/a&gt;
                  &lt;a href="about.html"&gt;ABOUT&lt;/a&gt;
              &lt;/div&gt;
              &lt;a href="index.html" id="logo" class="noHover"&gt;&lt;img src="images/logo_6_small.png" alt="Claire Crawford"
                      id="logo_Claire" /&gt;&lt;/a&gt;
              &lt;div id="nav_right"&gt;
                  &lt;a href="portfolio.html"&gt;PORTFOLIO&lt;/a&gt;
                  &lt;a href="blog.html"&gt;BLOG&lt;/a&gt;
                  &lt;a href="contact.html"&gt;GET IN TOUCH&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;section id="home_img"&gt;
          &lt;img src="images/moodboard_frida_1250x330_roundText_center_goldTopBorder.jpg" id="moodboard"
              alt="Collage of many small, beautiful images" /&gt;
      &lt;/section&gt;
  </code></pre>
  
  <pre><code>body {
    margin: 0;
    line-height: 1.2em;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100%;
  }
  
  /* header {
    height: 200px;
    position: fixed;
  } */
  
  #nav {
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 180px;
  
  }
  
  #logo {
    flex: 0 0 auto;
    padding: 0 30px;
    margin-top: 20px;
  }
  
  #nav_left {
    flex: 1 0 0;
    display: flex;
    justify-content: flex-end;
    margin-top: 100px;
  }
  
  #nav_right {
    flex: 1 0 0;
    display: flex;
    justify-content: flex-start;
    margin-top: 100px;
  }
  
  a {
    flex: 0 0 auto;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
    font-family: Tenar Sans;
    font-size: .85em;
    margin: 0 1.4em; 
    height: 20px; /* need this to correct hover effect */
  }
  
    a {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
     } 
  
    a:before {
        content: "";
        position: absolute; 
        width: 100%;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: rgb(192,192,192); 
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s; }
  
  
      a:hover:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
      }
  
      .noHover:hover::before {
        background: none;
        visibility: hidden;
      } 
  
  
  /*
  .toggle-menu {
    display: none;
  } */
  
  
    #moodboard {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 70px; 
  }  
  
   #moodboard {
      min-height: 100%;
      min-width: 1250px; 
  
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
  }
  </code></pre>