Technical Documentation Page Help

Hi all,

I need some help/feedback on my technical documentation page here.

I’m struggling a bit on the responsiveness of it, in particular the navbar on top.
I tried to play around with some media queries but this is the best I could get out of it.

From looking online, I understand that to make a cool looking dropdown navbar for smaller screens you’ll need bootstrap, but I’m still going through my HTML/CSS course so I know nothing about that.

Is there another way to make it look better on smaller screens?

Also any feedback on the overall project will be much appreciated.

You do not need Bootstrap, here are some simple examples.

CSS only

Some JS


I think your menu is pretty good.

  • You might center the links and make them span all of the container (so you can click the links without clicking just the text).

  • Maybe make the container a bit shorter (less tall).

  • Maybe fix the container so the links stay at the top when navigating.

Thanks, much appreciated.

I’ll try and do the CSS only version you sent me as I don’t know Javascript yet.

As for the spanning of the links, I believe I made them take up like 90% of the space because I liked to see the border radius on them, but apparently not a great choice fo accessibility :sweat_smile:

I mean the actual click target, not the li

You did set the a elements to display block but because the li containers are flex containers they shrink the content down. You can set flex: 1 on the a elements to let them grow.

#navbar a {
  flex: 1;
}

I might also suggest a bit of padding on the links to make them easier to click (larger click target).

I tried #navbar a { width: 100%;}in the media query to make it fully clickable, but your solution seems way better. Thanks again

Setting a full width would work as well. The flex: 1 way is just more the flexbox way of doing it.

That makes more sense since I’m making a document about flexbox :sweat_smile: