Trying to make navbar stay on the left side of page in full browser then move to the top with smaller browser

I’m working on technical documentation project. I’m far from done but one thing I’m having trouble getting sorted out is related to the navbar. I would like it to function like the example here:

https://codepen.io/freeCodeCamp/pen/NdrKKL

I’ve tried @media, different positions, etc, but can’t seem to get the navbar to stay on the left side in large browser and then move to the top when the browser is is made smaller. Here is the link to my code:

https://codepen.io/PickNStrum/pen/LYeVvVV

What am I missing / doing wrong?!!

Update:

If you look at my link now, I was able to get the navbar to adjust so the main body isn’t covered by the bar when the browser size is changed. I used an @media - Yes! That was bugging me. I think I’m going to keep like this, however, I am curious how the template (first link above) pushed the nav bar to the top and the content to the bottom when the browser window was made smaller.

Just trying to understand. Thanks!

Hi, I used ''left:0; to keep it on the left. Then in @media, use max-width: 400px for example. But I’m still working on it too :thinking:

1 Like

Thanks for the heads-up. I’ll let you know if I make any progress.

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