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:

My project:


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.

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

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