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

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.

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="Assets/css/site.css">
</head>
<body>
    <header>
        <img src = "Assets/images/Header1.jpg" id = "headImage">

        <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>
        
    </header>


    
    <footer>

    </footer>
</body>

CSS

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);
}

Solution

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>