Make a Nav Bar Stick

How do I get my nav bar to stick to the top of the screen when you scroll?

A lot of things to fix your code that not necessarily has something to do with your code.

Mandatory:

remove -webkit-sticky; as it is useless. Firefox supports sticky be default as every other browser with exeption of IE. The use of -webkit- is outdated since many years.
they sticky should be applied to the navbar itself not just the list.
The Navbar needs to be excldued from the header. If it is a child of the header, it will be forced to stay within the child and therefor pulled out of the screen.

Optional:

using float for styling purpose is not only outdated but never was a thing. It was mis-used by many out of its actual purpose. It should only be used for floating images within a paragraph. For that use, delcare the list simply as inline-block. Then it can be aligned with text-align.

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 {
  position: sticky;
  top: 0;
}

#navBar ul {
  list-style-type: none;
  overflow: hidden;
  background-color: rgb(20, 20, 20);
  padding: 0;
  margin: 0;
}

#navBar li {
  display: inline-block;
}

#navBar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navBar a:hover {
  background-color: rgb(31, 31, 31);
}

<header>
  <img src="Assets/images/Header1.jpg" id="headImage">
</header>
<nav id="navBar">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="weapons.html">Weapons</a></li>
    <li><a hred="maps.html">Maps</a></li>
    <li><a href="modes.html">Modes</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>



<footer>
</footer>

How to make a sticky navbar without JS?

This is what position: sticky is for:

#navbar {
  position: sticky;
  top: 0;
  background: aliceblue;
}

<div id="navbar">
  <a href="/">Hello, World!</a>
</div>

<div id="content-container">
  <div id="content">
    <p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p>
  </div>
</div>

How do I create a sticky nav bar?

You could use pure css with position: sticky. To define how far from the top the value becomes sticky, modify the top property.

nav {
  position: sticky;
  top: 0;
}

Example 1

body {  padding: 0;  margin: 0;}
nav {  position: sticky;  top: 0;}
nav>ul {  margin: 0;  list-style-type: none;  padding: 0;  display: flex;  flex-direction: row;  background: red}
nav>ul>li {  padding: 10px;}

<nav>  <ul>    <li>Item</li>    <li>Item</li>    <li>Item</li>  </ul></nav><div>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p></div>

CSS - Make navbar stick on fixed-top navbar while scrolling?

I think the simplest option is to add padding-top on the body, and set z-index:-1 on the fixed navbar.

https://codeply.com/p/j3RFVB52OQ

body {
    padding-top: 56px;
}

.fixed-top {
    z-index: -1;
}

Then the HTML structure is...

<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg">
    <a href="" class="navbar-brand">My Django App</a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="http://127.0.0.1:8000/" class="nav-link">Home Page</a></li>
        <li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="nav-link">Sign Up</a></li>
    </ul>
</nav>
<div class="container sticky-top">
    <nav class="navbar navbar-dark bg-dark">
        <a href class="navbar-brand">List of Users</a>
    </nav>
</div>
<div class="container">
    <div class="row">
       scrollable content ...
    </div>
</div>

This is similar to: Bootstrap 4 Multiple fixed-top navbars