Issues with fixing a side navigation bar while still keeping within normal document flow

Hello,

I am currently working on a navigation bar for my technical documentation page.

I based my navigation bar structure on the example project due to the strict test requirements. I only looked at the HTML and not the CSS.

The first way of fixing the navigation bar was to simply fix the nav. The issue is that the main (green border) is now underneath my navigation bar. My idea of using flexbox on the body was to align the navigation bar and main next to each other in a row, but the fixed nav is now not apart of the normal flow of the document.

nav {
  height: 100vh;
  width: 400px;
  border: 1px solid black;
  box-shadow: 2px 2px 5px black;
  position: fixed;
  background-color: rgb(235, 235, 235);
  display: block;
}
nav > ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
nav header {
  font-size: 30px;
  text-align: center;
  padding: 3%;
}

As a result of this, I then decided to try fix the ul and the header elements instead. This would allow the nav to still be apart of the normal flow. It mostly worked, besides the header now not being in the right position. The header seems to be out of the normal flow of the navigation bar due to two fixed elements.

nav {
  height: 100vh;
  width: 400px;
  border: 1px solid black;
  box-shadow: 2px 2px 5px black;
  background-color: rgb(235, 235, 235);
}
nav > ul {
  position: fixed;
  width: 400px;
  margin: 0;
  padding: 0;
}
nav header {
  width: 400px;
  position: fixed;
  font-size: 30px;
  text-align: center;
  padding: 3%;
}

And ideas of how to solve this? Would I need a header and ul wrapper?

I don’t understand why you’re using flexbox , you should have both the elements inside a single tag to use flexbox and align them next to each other using row or in a column one below the other and setting the width,

now for you problem you can set margin-left to 400px and the main will align next to the navbar

  width: 100%;
 max-width: 1920px;
 border: 2px solid green;
 height: 100%;
-> this margin-left:405px;
}```

[Flexbox MDN check this out it would be helpful in your project if you re planning to use flexbox ](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.