how can we create a simple sticky navigation element to the side of content?

Here is my solution. I wrapped nav and main in an extra container, giving it the class name some-container-inside. In css, I changed all my edits. Hope this is what you need.

header h1 {
  text-align: center;
}

main {
  display: block;
  max-width: 500px;
  /*margin-left: auto;*/  /*delete this it*/
  /*margin-right: auto;*/ /*delete this it*/
  width: 100%;
}

main h1 {
  margin-top: 0; /*add this it*/
}

nav {
  display: table; /*add this it*/
  border: 1px solid #000;
  width: 200px;
  position: sticky;
  top: 0;
  right: 0;
  background-color: orange;
  margin-right: 25px; /*add this it*/
  margin-left: 25px; /*add this it*/
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul a {
  display: block;
  border: 1px solid #000;
  margin: 5px 0;
  padding: 5px;
}

.some-container-inside {
  display: flex; /*add this it*/
  justify-content: center; /*add this it*/
}
<div class="some-container">
  <header>
    <h1>
      Some header
    </h1>
  </header>
  <div class="some-container-inside">
  <nav>
    <ul>
      <li><a href="#below">Below</a></li>
      <li><a href="#above">Above</a></li>
    </ul>
  </nav>
  <main>
    <h1>
      Below is some content
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
      Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
      dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
      varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
      tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
    </p>
    <p>
      Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
      ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
    </p>
    <p>
      Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
      convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
    </p>
    <p>
      Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
      enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
      mattis.
    </p>
    <h1 id="above">Above all</h1>
  </main>
  </div>
</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top