How to make menu look like fixed-top without following on scroll

I’m using fixed-top on nav it makes it on top of the header as shown on image.
Problem is, that when I scroll down, the menu goes down.
Is there any way (sure there is) how to make nav look the same but not follow when scroll?
I mean without fixed-top on nav.

Pictures
here is how it looks
here it follows

Here are codes:

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #fff;
}

nav.navbar {
  transition: top 0.3s;
}

nav.navbar.navbar-light .navbar-nav {
  padding: 1.5rem 0;
}

nav.navbar.navbar-light .navbar-nav .nav-item {
  text-transform: uppercase;
  font-weight: 700;
}

nav.navbar.navbar-light .navbar-nav .nav-item .nav-link {
  padding-left: 1.5rem;
  color: #fff;
}

nav.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: #FE5000;
}

nav.navbar.navbar-light .navbar-nav .nav-item.active .nav-link {
  color: #FE5000;
}

header.masthead {
  padding-top: 10.5rem;
  padding-bottom: 6rem;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://www.patrikderka.cz/stavby-seibert/assets/img/home-bg.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

header.masthead .btn {
  background-color: #FE5000 !important;
  border: #FE5000 !important;
  padding: 1.25rem 2.5rem;
}

header.masthead .btn a {
  color: #fff;
  text-decoration: none;
}

header.masthead .masthead-subheading {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5rem;
  margin-bottom: 25px;
}

header.masthead .masthead-heading {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 3.25rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  header.masthead {
    padding-top: 17rem;
    padding-bottom: 12.5rem;
  }
  header.masthead .masthead-subheading {
    font-size: 2.25rem;
    font-style: italic;
    line-height: 2.25rem;
    margin-bottom: 2rem;
  }
  header.masthead .masthead-heading {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 4.5rem;
    margin-bottom: 4rem;
  }
}
<script src="https://kit.fontawesome.com/e5f67cf6ac.js" crossorigin="anonymous"></script>
<script src="reveal.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="/">Domu</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/reference/">O nás</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/cenik">Služby</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/cenik">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/kontakt">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<header class="masthead">
  <div class="container">
    <div class="masthead-subheading">My jsme stavaři.</div>
    <div class="masthead-heading">PTS-STAVBY Seibert</div>
    <a class="btn btn-primary btn-lg text-uppercase" href="#services">Zjistit více</a>
  </div>
</header>


<section id="onas" class="py-5">
  <div class="container">
    <div class="title">
      <h2>
        O nás
      </h2>
      <p>
        Kdo jsme a co děláme?
      </p>
    </div>
  </div>
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-md-6 my-auto">
        <p>
          Stavební firma PTS-STAVBY SEIBERT byla založena v dubnu roku 2006. Zpočátku se firma zaměřuje na rekonstrukce objektů.
        </p>
        <p>
          Postupem času začíná převládat klasická stavební činnost od základní desky včetně projektů.
        </p>
        <p>
          V letech 2010-2020 firma realizuje řadu výstaveb v obcí našeho regionu a to převážně rekonstrukce stávajících objektů.
        </p>
        <p>
          V roce 2020 firma rozšiřuje svoji činnost o speciální stavební práce (brušení podlach jansen,příprava podkladu pro velkoobchody s krytinamy všeho druhu.atd).
        </p>
      </div>
      <div class="col-12 col-md-6">
        <img title="Stavitelství" alt="Stavitelství" class="img-fluid" src="https://www.patrikderka.cz/stavby-seibert/assets/img/mixfotek.jpg" />
      </div>
    </div>
</section>

I tried to put the nav into header.

>Solution :

Just change your CSS position to Absolute instead of Fixed.

.fixed-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;

Leave a Reply