How can I make my navbar fix to the top when I scroll down? I also want to have a picture above the navbar when scrolled all the way up

Question

I want to have a picture above my navbar, but as I scroll down I want it to to get fixed at the top, so no matter how much I scroll down it is always at the top, but scrolling all the way up I want to see the picture above it.

here is my codepen: https://codepen.io/MestreALMO/pen/LYEwLPY?editors=1000

p {
  text-indent: 50px;
}

img {
  width: 100%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container-fluid bg-light" style="height: 400px; padding:0px;">
  <img class="container-fluid bg-light" style="height: 400px; padding:0px;" src="https://img.elo7.com.br/product/zoom/1B7C0CA/painel-de-festa-colors-festa-personalizada.jpg"></img>
</div>

<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
  <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" id="hero" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" id="about" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" id="services" href="#">Services</a></li>
    </ul>
  </div>
</nav>

<div class="container-fluid bg-secondary" style="height: 5000px;">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
</div>

Answer 1

Use sticky-top in nav class like below, like the others also said. That makes the menu stay top of the page when you scrolling. But what you mean you want picture abovo the menu?

<nav class="sticky-top navbar navbar-dark bg-dark navbar-expand-sm">
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" id="hero" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" id="about" href="#">About</a></li>
    <li class="nav-item"><a class="nav-link" id="services" href="#">Services</a></li>
    </ul>
</div>
 </nav>

Answer 2

add "sticky-top" class in the nav. For more info click here

<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">

Answer 3

Just use the sticky-top class. It will stick to the top when you scroll down the page.

<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">

Don't hesitate to look into the Bootstrap documentation before asking. You could have found that here.

Answer 4

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top>