Bootstrap Collapse Navbar disappearing

I've looked around but can't find a solution to this issue.

When I change the window size to it's small enough for my navbar links to be replaced by the collapse icon and when I click on the icon that brings up the links, they really quickly show up like they're meant to and then disappear...

So I click the icon, the links show up like they're meant to and then they go half a second later

Here's my navbar code

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" id="links" href="distance.html">Distance</a></li>
    <li class="nav-item"><a class="nav-link" id="links" href="#">Test</a></li>
    <li class="nav-item"><a class="nav-link" id="links" href="#">Test</a></li>
    <li class="nav-item"><a class="nav-link" id="links" href="#">Test</a></li>
  </ul>
</div>

I also have the following links for popper, jquery and bootstrap included at the bottom of my body tag, as well as the bootstrap css link in my head tag

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

If anyone could help that'd be great!