Tech Doc Page: Flexbox Not Behaving as Expected

I’m having some trouble with the layout of my technical documentation project. Link is here:

The specific issue is that the elements in the navbar float above all the others, which becomes a large problem when the page shrinks. Does anybody have any idea what would cause this behavior Thanks in advance!

#navbar { 
  position: fixed 
}

Fixed position elements are removed from the normal document flow, so other elements in the normal document flow (like your <main> element) may overlap with it.

In fact, the only reason your navbar doesn’t overlap your main content even at a large viewport size is because you added padding-left: 18px to your <main> element. You can test this out by commenting out the padding-left rule and seeing what happens.

1 Like

Ohhh, that’s right, I had forgotten that those do that. Knowing that helped me mitigate this in desktop view, now I just have to puzzle out how to fix this in mobile. Thanks!

My recommendation would be to remove both the fixed positioning and the left padding.

Why do you think your layout requires the navbar to be fixed?

1 Like

Yup, You’re right. My takeaway from this is that fixed positioning is only necessary if I need something to float above other elements. For something like this, setting hard-coded values for the top, left, and width values more than does the job. Thanks again for your help!

You’re welcome.

I should also note that once you remove the fixed positioning, the values for top and left don’t do anything. Those properties only have an effect on positioned elements.

Right now the appearance of your navbar and main section are mostly a result of the width values you’ve set on them.

Good point. Prolly a good opportunity to test out whatever section of Chrome Dev Tools that susses out unused CSS declarations.