Navbar won't stay fixed to top

:raised_hand_with_fingers_splayed: I am doing the " Responsive Web Design Projects - Build a Product Landing Page" project and for the life of me no matter what I try I cannot get the navbar to stay fixed to the top. What am I doing wrong?

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phat Cat</title>
    <link rel="stylesheet" href="app.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;800&family=Open+Sans:ital@1&display=swap" rel="stylesheet">
    
</head>
<body>

    <header>
        <div class="container" id="header">
            <nav id="nav-bar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
                <a class="navbar-brand" href="#"><i id="header-img" class="fas fa-cat"></i> Phat Cat Sweater Co</a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
                  <ul class="navbar-nav">
                    <li>
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li>
                      <a class="nav-link" href="#">DIY</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Products</a>
                      </li>
                  </ul>
                </div>
              </nav>
        </div>

        <div class="container" id="getStarted">
            <h2>Premium handmade feline sweaters</h2>
            <form id="form" action="#">
              <input type="email" class="form-control" id="email" placeholder="Enter your furriest email" required>
              <button id="submitEmail" type="button" class="btn btn-info justify-content-center">Get Catnip</button>
            </form>
        </div>
    </header>

    <div class="container">
        <section id="features">
            <div class="row align-items-center">
                <div class="col-lg-1 icon">
                    <i class="fas fa-leaf"></i>
                </div>
                <div class="col-lg-11 description">
                    <h3 id="desc">Infused With Premium Catnip</h3>
                    <p>All of our kitty sweaters are infused with only the finest catnip your cat is sure to love.</p>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-lg-1 icon">
                    <i class="fas fa-shipping-fast"></i>
                </div>
                <div class="col-lg-11 description">
                <h3 id="desc">Cheetah Fast Shipping</h3>
                <p>To ensure all of our customers recieve their sweaters on time we have real Cheetahs deliver your package with lighting speed. We also provide free returns if the Cheetah eats some of your sweater.</p>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-lg-1 icon">
                    <i class="fas fa-search-dollar"></i>
                </div>
                <div class="col-lg-11 description">
                <h3 id="desc">Quality Guanteed</h3>
                <p>Every Phat Cat Sweater is inspected and sniffed by our team of 20 felines to make sure your sweater is fitting, looking and smelling purrfect.</p>
                </div>
            </div>
      </section>

      <section id="diy">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/8DoGKHlHVcs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </section>

      <section id="products">
        <div class="container">
          <div class="row">
              <div class="col-lg-4 mb-4">
                <div class="card">
                    <img class="card-img-top" src="imgs/pattern1.jpeg" alt="">
                    <div class="card-body">
                       <h5 class="card-title">First Thing</h5>
                       <p class="card-text">This is some random words for the card text</p>
                       <a href="" class="btn btn-outline-success btn-sm">Download</a>
                       <a href="" class="btn btn-outline-danger btn-sm"><i class="far fa-heart"></i></a>
                    </div>
                </div>
              </div>
              <div class="col-lg-4 mb-4">
                <div class="card">
                    <img class="card-img-top" src="imgs/pattern2.jpeg" alt="">
                    <div class="card-body">
                       <h5 class="card-title">Second Thing</h5>
                       <p class="card-text">This is some random words for the card text</p>
                       <a href="" class="btn btn-outline-success btn-sm">Download</a>
                       <a href="" class="btn btn-outline-danger btn-sm"><i class="far fa-heart"></i></a>
                    </div>
                </div>
              </div>
              <div class="col-lg-4 mb-4">
                <div class="card">
                    <img class="card-img-top" src="imgs/pattern3.jpeg" alt="">
                    <div class="card-body">
                       <h5 class="card-title">Third Thing</h5>
                       <p class="card-text">This is some random words for the card text</p>
                       <a href="" class="btn btn-outline-success btn-sm">Download</a>
                       <a href="" class="btn btn-outline-danger btn-sm"><i class="far fa-heart"></i></a>
                    </div>
                </div>
              </div>
          </div>
      </div>
      </section>

      <footer>
        <ul>
          <li>Privacy</li>
          <li>Terms</li>
          <li>Contact</li>
        </ul>
        <span>Copyright 2020, Phat Cat Sweater Co</span>
      </footer>
    </div>


    
</body>
</html>

CSS:

body {
    font-family: 'Catamaran', Open-Sans;
    padding-top: 60px;
    background-image: url(https://s1.1zoom.me/b5050/200/Cats_Kittens_Ginger_465221_3840x2400.jpg);
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(5px);
}


#header-img {
    font-size: 2rem;
}

#nav-bar {
    position: fixed;
    top: 0;
}


#getStarted {
    text-align: center;
    padding: 10px;
}

#email {
    width: 30%;
    margin: auto;
}

#submitEmail {
    margin: 10px;
}

#features {
    margin-top: 30px;
}

.icon {
    text-align: center;
    font-size: 35px;
    padding-bottom: 10px;
}

#diy {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

#products {
    margin-top: 50px;
}

Thank you for the help!
-Troy

Okay I fixed it myself. For some reason when I commented out: “backdrop-filter: blur(5px);” under body in the css it made the navbar fixed to the top. Weird. Can anyone explain why?

I tried reading the specs for this but I quite frankly didn’t feel like reading it after realizing just how complex it is. My best guess is it has to do with the rules about when and how a containing block is created (the same applies to filter).

Two solutions I found:

  1. Apply the image and filter to the html instead. You will have to overwrite the Bootstrap default body background-color with transparent.
Example code
html {
  background: url(https://s1.1zoom.me/b5050/200/Cats_Kittens_Ginger_465221_3840x2400.jpg);
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(5px);
}

body {
  font-family: "Catamaran", Open-Sans;
  padding-top: 60px;
  background-color: transparent !important;
}
  1. Or create a container element for the image and filter and put everything except the nav inside this container.
Example code

Simplified HTML example

<body>
  <nav>
    ...content
  </nav>
  <div class="filter">
    ...content
  </div>
</body>
.filter {
  background-image: url(https://s1.1zoom.me/b5050/200/Cats_Kittens_Ginger_465221_3840x2400.jpg);
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(5px);
}