Fixed Bootstrap Navbar Not Working

Question

I am trying to make it so that when I scroll down a page, my navbar is fixed at the top, I have tried so many different things and I'm not sure what I am doing wrong. Please see my code below for the nav.

.navbar {
  padding: .8rem;
}

.navbar-nav li {
  padding-right: 25px;
}

.nav-link {
  font-size: 1.1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html"><img src="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav nav-pills ml-auto">
        <li class=nav-item active>
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#aboutme">About</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
</nav>

Answer 1

.navbar {
  padding: .8rem;
}

.navbar-nav li {
  padding-right: 25px;
}

.nav-link {
  font-size: 1.1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html"><img src="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav nav-pills ml-auto">
        <li class=nav-item active>
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#aboutme">About</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
</nav>
<div style="height: 5000px; background-color: red; width: 500px;"></div>

The navbar can have the class .sticky-top added to it in order to easily fix it to the top of the page. Support for this is widespread, with the exclusion of Internet Explorer. As an alternative, fixed-top can be used, but this may cause some overlapping issues if not supplemented by additional CSS.

A solid red div element has been included in order to make the page large enough to scroll through.