Navigation bar being messed up by position fixed

HTML-CSS
1

My pen --> https://codepen.io/Mike-was-here123/pen/zMWrwx

Background knowledge:

Navigation bar can be found on line 30 CSS, 12 HTML.

I put the children in a row and put them to center

Issue:

When i try to add position:fixed; to the .nav (33) it gets all messed up:

image
image1923×743 301 KB

What it should look like:

image
image1931×658 283 KB

Other pens that use position: fixed yet are just fine (CSS):

Pen that uses fix (35)
Pen that uses fix (8)
Pen that uses fix (36)

Question:

How can i fix this and lock it to move with the page? I have never had this issue before.

2

When you use position, you need to specify edges/offsets. You fix it easily! :slight_smile:

4

But now you have a new set of problems. ^^
If you want it to go as far as its parent stretches, you can also use:

nav {
  position: sticky;
  top: 0;
}
1 Like