Technical Documentation Page | Feedback appreciated

Code Feedback
1

Hello,

I wanted some feedback regarding my technical documentation page project: https://codepen.io/Tech_CA_Bro/full/BMdReZ
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,
-Tech.

2

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
3

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?

Thanks,
-Tech.

4

Yes, I would say so.

Good luck :+1:

1 Like
5

Thanks a lot man! :slight_smile:

7

Hey! I updated the codepen. There is code for the code elements now. But I have trouble making it look like theirs: https://codepen.io/freeCodeCamp/full/NdrKKL

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,
-Tech.

8

Looks like this is the the style it uses.

html

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

css

code{
display:block;
text-align: left;
white-space: pre;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color:#f7f7f7;
padding:15px;
margin:10px;
border-radius:5px;
}

1 Like
9

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.

Thanks,
-Tech.