title: How to create a fixed/sticky header on scroll with Html and CSS only?
body: <p>Here is my Html. I want to fix my nav item on top on scrolling using html and css I tried a lot of things but I was not able to fix it. How can I build it without JavaScript or jQuery?</p>
  <pre><code>&lt;div class=&quot;contain&quot;&gt;
    &lt;p&gt;
      Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones 
      no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae 
      gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec 
      et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;nav&gt;
    &lt;div class=&quot;navWide&quot;&gt;
      &lt;div class=&quot;wideDiv&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;Link 3&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;navNarrow&quot;&gt;
      &lt;i class=&quot;fa fa-bars fa-2x&quot;&gt;&lt;/i&gt;
      &lt;div class=&quot;narrowLinks hidden&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;Link 3&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class=&quot;contain&quot;&gt;
        &lt;p&gt;
          Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones 
          no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae 
          gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec 
          et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
        &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  <p>My custom CSS using this. How can I fix my problem? It will be really helpful for me and others too why I want to complete this using CSS. I am making a small component using html and CSS, this is one more component and I got stuck here.</p>
  <pre class="lang-css prettyprint-override"><code>.contain{
    height:100vh;
    backgroud:#ccc;
  }
  
  nav {
      background-color: #CCC;
      overflow: hidden;
      padding: 1em;
      border-bottom: 1px solid #000;
  }
  
  nav a {
          color: #000;
  }
  
  nav a:visited {
          color: #000;
  }
  
  nav .navWide {
      display: none;
      margin: 0 auto;
  }
  
  nav .navWide .wideDiv {
      text-align: center;
  }
  
  nav .navWide .wideDiv a {
      text-decoration: none;
      display: inline-block;
      padding: 0 2em;
  }
      
  nav .navNarrow i {
      float: left;
      cursor: pointer;
      color: #000;
  }
  
  nav .navNarrow .narrowLinks a {
      text-decoration: none;
      display: block;
      float: left;
      clear: left;
      padding: 0.5em 0;
  }
  
  .hidden {
    display: none;
  }
  
  /*Adjust breakpoint as desired to select when the &quot;hamburger&quot; menu is
  replaced by just the links.*/
  @media (min-width: 480px) {
      
      nav .navWide {
          display: block;
      }
  
      nav .navNarrow {
          display: none;
      }
  }
  </code></pre>