Moving a navbar

HTML-CSS
#1

Hi guys,

I’d really appreciate your help with this. I’m on the Tech Doc Page project, and I want to move my navbar from the side to the top of the viewport when I reduce the screen size. I’ve tried a media query with top: 0 and width: 100%, but no luck so far. I’m sure there’s something really obvious I’m not grasping here, but right now it’s eluding me. Code so far is here: https://codepen.io/zara-knox/pen/BazKERJ

It’s one of those ‘what the hell am I doing’/‘I’ll never become a front end dev’ days. Feeling pretty gloomy!

Any additional tips appreciated. Thank you!

1 Like
#2

I think it looks nice.

To get that effect, I’d change the flex-direction to row, in addition to what you’ve already done, and add 300px margin-top to the main.

1 Like
#3

You’re a star! Thank you. I realise now how simple it was. Haha. Thanks so much.

#4

Hey :slight_smile: I also noticed that you have a horizontal scrollbar showing up, at least on my screen. I’m pretty sure if you change the width: 100vw in body to max-width: 100vw this will get rid of it.

1 Like
#5

Hey, thanks! That wasn’t appearing on my crusty little Macbook, but I’ve made that change now. Thanks for the tip!

#6