Help with Technical documentation page 100

Can anyone help me make the side navbar responsive? i just need someone to show me an example im sruggling to find what i need online - nothings working :persevere:

*I’d love for someone to write me up the correct code that i can add as ive been struggling for hours now

thankyou for any help
Lulu

@lulu_bed I will link you too mine. I did this a while ago and I am now testing it out. It looks like I just made my nav bar stay the same while my text was responsive. Here is the link https://technical-doc-fcc-project.glitch.me/ for the live site. If you want the code it is right here https://github.com/LandonLloyd/Responsive-Web-Design! If you have any other questions feel free to @ me! :smiley:

I think it might help if you thought of your page as consisting of just two parts, the menu and the main content. The menu would be the <nav> and the main content would be the <main>. This would mean that you need to move the <nav> out of the <main> so that it comes right before.

<body>
  <nav>...</nav>
  <main> ... </main>
</body>

Now it is set up so that by default the menu will be on top of the content, which is probably what you want for narrow view port widths. Then you can use CSS flexbox to put them side-by-side for wider view ports, and you would use CSS break points to force that change.

thanks so much for your help just my menu is not on the top by default its still on the side. not sure where to go from here

The reason your menu is not on the top is because you have its position set to fixed and width set to 300px. You don’t need either of those for it to be on the top and fill up the entire width of the browser.

My recommendation would be to redo the CSS using a narrow-first approach. Remove all of the CSS you have for the <nav> right now. Narrow your browser as far as it will go. The menu will be on the top of the page. Style the <nav> as you like for that narrow width.

Once you have the menu looking nice at the narrow width then gradually increase the width of your browser. At some point you will feel that you have enough horizontal room to move the menu to the left side of the page. That is where you set your CSS break point. You use the break point to add the necessary styles to <nav> so that it is on the left side.

A few things:

  • Use em units for the break point, not px. This will allow for the break point to take both changes in width and changes in text size into account. To find the em value, measure in px and then divide by 16.
  • For your narrow width (default) styles you also want to remove the 300px left margin on the <section>s. And then in the break point styling you can add them back in if that’s the way you want to do it.

Thankyou!! ill give it a go :slight_smile:

I did it finally! thanks again for all your help bbsmooth!!

Awesome, that is much nicer. I’ll try not to be a perfectionist here, but just a few further suggestions:

  • Aesthetically, I think it would be nice if when the menu is on the left side the gray background color went all the way down the page. I was able to do this by removing just one CSS property on <nav>.
  • I’m going to give you a little exercise, you’ll need to use Firefox to view your page. Go to the View->Zoom menu in FF and activate ‘Zoom Text Only’. Then narrow your browser to the point just before your page shifts to the menu being on top. Now hold down the Ctrl key and scroll your middle mouse button to increase the text size on the page. It won’t take long until you see the problem. This is happening because you are using a px value for the CSS break point. Using px only takes into account the width of the view port, it doesn’t care about the text size at all. So let’s change it to em. Divide the px value by 16 and put the result in there and change the units to em. Now do this exercise again and see what happens.