Technical Documentation Page | Feedback appreciated


I wanted some feedback regarding my technical documentation page project:
I have tried to look for design ideas and except for the menu I had no ideas. So feel free to throw some at me :slight_smile:.

Important question: Also, in mobile and tablet view I have a problem, the link at the end of my project is unclickable due to my navbar being 100vh. Is there a way to make the link clickable while still keeping my navbar at a 100vh?

Thanks in advance,

There is a way. You can give z-index: -1 to nav but that means it will make put your navbar behind your content.

I recommend you to not give 100vh to your navbar when the menu is closed.

1 Like

Yeah I tried playing with the z-index but that wasn’t that I wanted.
I made it 90vh instead because there is only one link it works.

I assume we would need JS to make it work well if there was multiple links throught the page?


Yes, I would say so.

Good luck :+1:

1 Like

Thanks a lot man! :slight_smile:

Hey! I updated the codepen. There is code for the code elements now. But I have trouble making it look like theirs:

Not sure why. I assume it is a white-space &word-break or something problem, I tried looking but I don’t know! :confused:.

Thanks in advance,

Looks like this is the the style it uses.


if (true) {
var x = 5;
console.log(x); // 5


text-align: left;
white-space: pre;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;

1 Like

Well. Yes that is their version. But mine doesn’t use that word break and word wrap. And I tried them and it doesn’t do anything. Also I used white-space: pre-line because it works better on mine. I don’t know why thought :confused:.

Also, why did you write: " html

if (true) { var x = 5; } console.log(x); // 5"

As far as I know this isn’t HTML too X). Sorry that confuses me.