The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #237032

    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.



    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.


    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. (:

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.