Navigation bar being messed up by position fixed

My pen -->

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


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

What it should look like:

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)


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

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

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