Positioning a "Wrapper" Div Underneath a Fixed Navigation Bar

Positioning a wrapper div underneath a fixed navigation bar?

set top:0 on your navbar and add 30px margin-top on your wrapper div

#navBar {
    background: RGB(0, 0, 0);
    height: 30px;
    position: fixed;
    width: 100%;
    top:0
}
#wrapper {
    margin: 30px auto 0;
    width: 980px;
}

http://jsfiddle.net/duncan/NkRxQ/

How can I make content appear beneath a fixed DIV element?

What you need is an extra spacing div (as far as I understood your question).

This div will be placed between the menu and content and be the same height as the menu div, paddings included.

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
     
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

See my example here.

This works by offsetting the space that would have been occupied by the nav div, but as it has position: fixed; it has been taken out of the document flow.

---

The preferred method of achieving this effect is by using margin-top: 95px;/*your nav height*/ on your content wrapper.

nav bar fixed position and how it affects other elements positioning

Just use position: sticky; combined with top: 0; and it will work as intended. your main issue is following css line:

.header-wrapper{

position: fixed;

position: top;

z-index:10;

width:90%;

}

its invalid css as you first declare position: fixed; and right after position: top; which is invalid and overwriets the first. What you actually mean is top: 0;

background-color: white; }

.full-page-div {
  width: 90%;
  margin: 0 auto;
}

.name-header {
  font-family: 'Raleway';
  font-size: 25px;
  color: grey;
  text-transform: uppercase;
  margin-bottom: 80px;
}

.feature-recipe-div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 80px;
  z-index: 1;
}

.feature-paragraph-div {
  width: 55%;
}

.feature-recipe-talk,
.feature-recipe-link {
  font-family: 'Cormorant';
  font-size: 18px;
}

.feature-recipe-link {
  color: grey;
}

.feature-recipe-header {
  text-align: center;
  font-family: 'Raleway';
  font-size: 50px;
  color: black;
  font-weight: 400;
}

.header-wrapper {
  position: sticky;
  top: 0;
  width: 90%;
  background-color: white;
}

.header-nav {
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
  margin-bottom: 50px;
  z-index: 10;
}

.header-nav-link {
  text-decoration: none;
  font-family: 'Raleway';
  text-transform: uppercase;
  color: grey;
}

<h1 class="name-header">Lacy Roe Recipes</h1>

<nav class="header-wrapper">
  <ul class="header-nav">
    <li>
      <a href=# class="header-nav-link">Home</a>
    </li>
    <li class="header-nav-link-dropdown">
      <a href=# class="header-nav-link">Recipes</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Cookbooks</a>
    </li>
    <li>
      <a href=# class="header-nav-link">About</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Work With Me</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Contact</a>
    </li>
    <li>
      <a href=# class="header-nav-link" class="search-icon"><i class="fas fa-search"></i><input type="text" class="search-area"></a>
    </li>
  </ul>
</nav>

<div class="feature-recipe-div">
  <div class="feature-paragraph-div">
    <h2 class="feature-recipe-header">New Lunch Classics</h2>
    <p class="feature-recipe-talk">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe facilis, iure sed quo, expedita nam voluptates consequatur eius vero omnis accusantium. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quibusdam voluptatem facilis
      aut cumque consequuntur fugiat dicta, praesentium sapiente mollitia in nobis dolorum voluptates iste, laboriosam porro saepe maiores vitae. </p>
    <p><a href="#" class="feature-recipe-link">Continue Reading</a></p>
  </div>
  <div class="main-img-div">
    <img class="main-img" src="https://greenkitchenstories.com/wp-content/uploads/2013/01/Breakfast_bowl_2.jpg">
    <p class="cite">Photograph by David Frankel</p>
  </div>
</div>

How to position a DIV beneath a fixed DIV with dynamic size

Pure Javascript solution

With javascript, you can get the height and the position of your <div id="nav"> and use them to compute the position of your <div id="content">:

var navDivElement = document.getElementById("nav");
var contentDivElement = document.getElementById("content");

contentDivElement.style.top = navDivElement.clientHeight + navDivElement.getBoundingClientRect().top + 'px';

Presision

How to get the position of an element:

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Source: https://stackoverflow.com/a/11396681/4032282

How to get the dimensions of an element:

var e = document.getElementById('id')
console.log(e.clientHeight, e.offsetHeight, e.scrollHeight);

• clientHeight includes the height and vertical padding.
• offsetHeight includes the height, vertical padding, and vertical borders.
• scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

Source: https://stackoverflow.com/a/526352/4032282

CSS Sticky solution

Change the position: fixed; of the nav by position: sticky; and add a top: 0;.

That way the <div id="content"> will be placed under the nav, but the nav will stay on the top of his container.

<html>
  <head>
    <style>
    #nav {
      position: sticky;
      top: 0;
    }

    /* Allow you to play with the browser height to make the vertical scroll appears and use it to see that the nav will stay on top */
    #content {
      height: 500px;
      background-color: #ff0000;
    }
    </style>
  </head>
  <body>
    <div id="nav">NAV</div>
    <div id="content">CONTENT</div>
  </body>
</html>

Fixing navbar using fixed position or sticky position

1. position : sticky

The easiest way by far is to use sticky position but on header not on nav. Because as element I am sticky as long as my parent is visible on the screen. And since the height of header is not that big, it seems like having position:sticky on nav is not working. To know more about position sticky, you could read here.

Here is the working example:

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: #eee;
  color: black;
}

.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/* lines I added*/
header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: #eee;
}
nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 900;
  font-size: 1em;
  padding: 20px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid grey;
}

ul {
  flex-grow: 1;
  max-width: 30%;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
}

img {
  display: flex;
  width: 40vw;
}

ul li {
  display: inline;
  text-decoration: none;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  padding: 20px;
}

h2 {
  font-size: 1.4em;
  font-weight: 700;
}

p {
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

input[type="email"] {
  padding: 5px 10px;
  margin: 10px 0px;
  border: solid 1px black;
  width: 350px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="submit"] {
  margin: 10px auto;
  padding: 5px 15px;
  background-color: #f1c40f;
  font-weight: 900;
  border: #eee solid 0px;
}

.bus-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.desc {
  weight: 125px;
  width: 80vw;
  padding: 5px;
}

.icon {
  color: #c5a00df8;
  font-size: 2em;
}

.feat-title {
}

.features {
  padding-top: 20px;
  border: 40px 0px;
}

.video {
  margin: auto;
  padding: 30px 0px;
}

.tromb-types {
  display: flex;
  justify-content: center;
}

.type {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 50px;
  margin: 20px 10px;
  border: solid black 1px;
}

.title-tromb {
  font-weight: 700;
  font-size: 0.8em;
}

.price {
  padding: 20px 0;
}

.tromb-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  padding-bottom: 10px;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 20px;
  margin-right: 20px;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 100%;
}

.footer-links .footer-link {
  text-decoration: none;
  padding: 0px 10px;
  color: black;
}

.copyright {
  max-width: 100%;
  margin-top: 5px;
}

@media (max-width: 700px) {
  header {
    font-size: 1em;
  }

  nav {
    display: flex;
    flex-direction: column;
  }

  nav > ul {
    display: flex;
    flex-wrap: wrap;
  }

  .tromb-types {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .type {
    width: 300px;
  }

  .price {
    padding: 5px 0;
  }
}

<div class="wrapper">
  <header>
    <nav class="Navbar">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
      <ul class="nav-links">
        <li><a href="#" class="link">Features</a></li>
        <li><a href="#" class="link">How It Works</a></li>
        <li><a href="#" class="link">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form class="email-form">
      <div class="email-form">
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="button-center">
        <input class="sub-button" type="submit" value="GET STARTED">
      </div>
    </form>
  </section>

  <section class="bus-info">
    <div class="features">
      <div class="icon"><i class="fas fa-fire"></i></div>
      <div class="desc">
        <h2 class="feat-title">Premium materials</h2>
        <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fas fa-truck"></i></div>
      <div class="desc">
        <h2 class="feat-title">Fast Shipping</h2>
        <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
          not satisfied.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
      <div class="desc">
        <h2 class="feat-title">Quality Assurance</h2>
        <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
          instrument.</p>
      </div>
    </div>
  </section>

  <section class="video">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
  </section>

  <section class="tromb-types">
    <div class="type">
      <h3 class="title-tromb">TENOR TROMBONE</h3>
      <h2 class="price">$600</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">BASS TROMBONE</h3>
      <h2 class="price">$900</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">VALVE TROMBONE</h3>
      <h2 class="price">$1200</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>
  </section>

  <footer>
    <ul class="footer-links">
      <li><a href="#" class="footer-link">Privacy</a></li>
      <li><a href="#" class="footer-link">Terms</a></li>
      <li><a href="#" class="footer-link">Contacts</a></li>
    </ul>
    <p class="copyright">Copyright 2016, Original Trombones</p>

  </footer>
</div>

---

Related Topics