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

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;