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.
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 
it works!
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!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.