Help with Technical Documentation Page Nav-Bar

[Mutiplify]

Hello,

Link here: https://codepen.io/multiplify/pen/vYpaXXy

Could someone could point me in the correct direction for how to make the nav-bar float on the left side? Currently the Nav-bar is always present on the left side, but when I scroll down it doesn’t stay in it’s current position. How can I make sure that the Nav-Bar is the full height of the screen and that any overflow causes there to be a scroll bar?

I also want to know how I can do the same thing when the screen is collapsed and the media query parameters kick in. Right now it just shows everything on top of my content page so it’s rather long.

Thanks for your help!

[lasjorg]

Review the challenge Lock an Element to the Browser Window with Fixed Positioning

Check out MDN

position - CSS: Cascading Style Sheets | MDN

[seda]

This is one way of doing so:

.container {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content";
  padding-left: 100px;

}

#navbar {
  text-align: center;
  grid-area: header;
  background: red;
  display: grid;
  border-right: 2px solid black;
  position: fixed;
  left: -1px;

I’ll explain what the logic behind it is:
I made sure the navbar id had a positioning of fixed because fixed makes sure the content within the div stays in the same place even if the page is scrolled.
However, since you put the navbar inside of the container, this caused for some shift in the container. This had to be fixed with a padding-left. The rest is pretty self-explanatory. Play around with it if you’d like.

I advise you looking more into CSS positioning and what the positioning does to classes containing ids and vice versa!