Need help with "Technical Documentation Page"

I need help with the “nav-links” in my scrollable menu at the top. I noticed in the project example, you can click anywhere on the whole length of the link where there isn’t text and it will still bring you to the part of the page it says but with mine it won’t scroll down unless you click the text itself. What am I doing wrong?

Project example: https://codepen.io/freeCodeCamp/full/NdrKKL

My project: https://codepen.io/troy_b16/pen/dyZWbNN

Hey.

The <a> elements are not as high and wide as the parent <li> elements.
You can set some background-color to both to visualize what i mean.

Hope this helps.
Cheers.

I figured it out, I needed to add: display: block; to my a tag in my css.

1 Like

Yep, that’s half of the solution.

All I did was add that one extra rule and it seems to work fine now, are you noticing anything else I should be doing?

Oh I noticed, on desktop there was padding that was preventing me from clicking on certain spots because I had padding applied to my li’s instead of the a tags, I just switched the padding and boom :boom: it works!

1 Like


If you just add display: block to your <a> elements, your nav will work like this. If you hover over the green area, the link will work, however, it won’t if you click on the pink area.

Yep, that solved the problem, good job!

1 Like