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

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 >
  <div >
    <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
    <div  id="navbarNavDropdown">
      <ul >
        <li >
          <a  href="/">Domu</a>
        </li>
        <li >
          <a  href="/reference/">O nás</a>
        </li>
        <li >
          <a  href="/cenik">Služby</a>
        </li>
        <li >
          <a  href="/cenik">Portfolio</a>
        </li>
        <li >
          <a  href="/kontakt">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<header >
  <div >
    <div >My jsme stavaři.</div>
    <div >PTS-STAVBY Seibert</div>
    <a  href="#services">Zjistit více</a>
  </div>
</header>


<section id="onas" >
  <div >
    <div >
      <h2>
        O nás
      </h2>
      <p>
        Kdo jsme a co děláme?
      </p>
    </div>
  </div>
  <div >
    <div >
      <div >
        <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 >
        <img title="Stavitelství" alt="Stavitelství"  src="https://www.patrikderka.cz/stavby-seibert/assets/img/mixfotek.jpg" />
      </div>
    </div>
</section>

I tried to put the nav into header.

CodePudding user response：

Just change your CSS position to Absolute instead of Fixed.

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

CodePudding user response：

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 >
  <div >
    <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
    <div  id="navbarNavDropdown">
      <ul >
        <li >
          <a  href="/">Domu</a>
        </li>
        <li >
          <a  href="/reference/">O nás</a>
        </li>
        <li >
          <a  href="/cenik">Služby</a>
        </li>
        <li >
          <a  href="/cenik">Portfolio</a>
        </li>
        <li >
          <a  href="/kontakt">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<header >
  <div >
    <div >My jsme stavaři.</div>
    <div >PTS-STAVBY Seibert</div>
    <a  href="#services">Zjistit více</a>
  </div>
</header>


<section id="onas" >
  <div >
    <div >
      <h2>
        O nás
      </h2>
      <p>
        Kdo jsme a co děláme?
      </p>
    </div>
  </div>
  <div >
    <div >
      <div >
        <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 >
        <img title="Stavitelství" alt="Stavitelství"  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.