Technical Documentation Page Help

Code Feedback
1

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.

2

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.

3

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:

4

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).

5

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

6

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

7

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

8

A post was split to a new topic: Technical Documentation project

9

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