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

Question

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 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.

Answer 1

It sounds like you don't want fixed-top at all. Something like position: absolute;, so that the nav doesn't take up space and moves as the page does.
I've added the following:
.myNav {
position: absolute !important;
width: 100%;
}
Note: I added !important because _Navbar.scss comes in after, if you want to bump the custom CSS up the order, you need to increase the CSS Specificity (with an id or more classes, etc...)
* {
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;
}
}
.myNav {
position: absolute !important;
width: 100%;
}
<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 myNav">
<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>
Note: Due to media queries, you may need to run the snippet in fullscreen to see the effect.

Answer 2

Just change your CSS position to Absolute instead of Fixed.
.fixed-top {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1030;