title: How do I get my nav bar to stick to the top of the screen when you scroll?
body: <p>I am trying to use overflow: sticky; to get my nav bar to stop at the top of the screen when scrolling but its changing nothing, I've seen people say to set margin and padding on ul to 0 which I've done but had no change, I've also tried getting rid of overflow: hidden but that gets rid of the background color of the bar. HTML and CSS below.</p>
  <p>HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;Assets/css/site.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;img src = &quot;Assets/images/Header1.jpg&quot; id = &quot;headImage&quot;&gt;
  
          &lt;nav id = &quot;navBar&quot;&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href = &quot;index.html&quot; class = &quot;active&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href = &quot;weapons.html&quot;&gt;Weapons&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a hred = &quot;maps.html&quot;&gt;Maps&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href = &quot;modes.html&quot;&gt;Modes&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href = &quot;contact.html&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          
      &lt;/header&gt;
  
  
      
      &lt;footer&gt;
  
      &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>body{
      background-color: rgb(43, 23, 23);
      padding: 0;
      margin: 0;
      height: 1000px;
  }
  
  .active{
      background-color: rgb(31, 31, 31);
  }
  
  #headImage{
      width: 100%;
      height: 150px;
      object-fit: cover;
      object-position: 50% 50%;
  }
  
  #navBar ul{
      list-style-type: none;
      overflow: hidden;
      background-color: rgb(20, 20, 20);
      padding: 0;
      margin: 0;
      position: sticky;
      position: -webkit-sticky;
      top: 0;
  }
  
  #navBar li{
      float: left;
  }
  
  #navBar a{
      display:block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  #navBar a:hover{
      background-color: rgb(31, 31, 31);
  }
  </code></pre>