"Hash Tag Links Padding" doesn't work on first anchor but does on others.

[pandabbie]

Hello! First time poster here.

As the title states, I’ve implemented the hashtag padding trick to my anchors but I’m having a problem with the behavior of “visibility:hidden” on the first anchor (“#portfolio-wrapper”). The element is still being shown, thus pushing the content down. The second anchor (“#about-wrapper”) is nested in the same way but here, the :before element is correctly hidden and works as intended.

I’m using the “Fancier (Clean HTML) Method”:

h2:before {
display: block;
content: " ";
margin-top: -285px;
height: 285px;
visibility: hidden;
}

Please view the page source of my portfolio site.
The first anchor starts at line 91.
The second anchor starts at line 215.

For now, I’ve only specified the :before element to the second anchor.

I apologize if my post is hard to follow. Please let me know if further clarification is needed. Or I can break up the code in question into CodePen.

Thanks!

[bearhead]

Changing top:800px to top:700px for #poster-container should fix your issue :)

I think it’s because that div is positioned relatively, so you just need to account for the 100px offset from the pseudo element.

[pandabbie]

Ahhh, makes total sense! Really knocking myself in the head here for that one! Thank you so much. Such a simple and obvious issue, I’m ashamed I didn’t see it myself.

I’ve got it all fixed up now, thanks again! From one bear to another, haha. (:

[Author]

Posts