Anchors not working with Sticker header

  • Resolved mibtg

    (@mibtg)


    5 years, 5 months ago

    I just set up an HTML Anchor on my page with a link. I also have set on the Customize / Twentig Options / Header, the Sticky Header is selected.

    When I publish my site and click on the HTML link, it moves the linked location all the way to the very top of the page. Because of the sticky header it has moved the link too far up on the page so that it is now hidden under the header. It should have stopped just below the sticky header location.

    Can this please be fixed.

    It also causes a similar problem with my “Fixed Widget”. As I scroll my mouse I have a fixed widget to keep my side panel appearing while the rest of the page scrolls up and out of sight. The “Fixed Widget” will partially disappear under the Sticky Header. I have a fix for this problem. I set the top margin on my Fixed Widget = to the height of my Sticky Header. It works but seems clunky.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Twentig

    (@twentig)

    5 years, 5 months ago

    Hi @mibtg,

    Sticky header and anchors links are always complicated. There’s a new CSS property scroll-margin-top, but it’s currently not supported by all Web browsers (Safari and IE11).
    https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/

    This is not something we can globally fix. To make it work you need to add some CSS case by case. For example if you set an anchor on a heading <h2 id="anchor1">Heading</h2>, what you can do is add the following CSS (150px being the height of the header):

    #anchor1 {
    padding-top: 150px;
    margin-top: -150px;
}

    The fix you’ve done for your widget is fine.

    I hope the above is useful to you.
    Have a nice day.

    Tom

    Thread Starter mibtg

    (@mibtg)

    5 years, 5 months ago

    Thank you for this, however where do I put this extra bit of code?
    I have tried the following:
    I put it in the block where my link is located in the Advanced/Additional CSS area and changed the anchor to my anchor name
    “#The-Game{ padding-top: 50px; margin-top: -50px; }”, I then changed the 150px to various values and nothing changed, it still goes to the same wrong spot too far down the page.
    I see now when I inspect my site that I have this
    “<h3 class=”alignwide has-text-align-left #The-Game{ padding-top: 50px; margin-top: -50px; }” id=”The-Game” style=”line-height:1″>The Game</h3>”
    ==========================================

    I then tried to put it in the receiving block Advanced/Additional CSS area and changed the px value to something different
    #The-Game{ padding-top: 250px; margin-top: -250px; } and when clicking on the link it still goes to the same spot on the page?
    =============
    When I inspect my site I now see this
    <h3 class=”alignwide has-text-align-left #The-Game{ padding-top: 250px; margin-top: -250px; }” id=”The-Game” style=”line-height:1″>The Game</h3>

    Here is the link to my problem page https://mintinboxdigitalgames.com/new_wp/our-games/

    Plugin Author Twentig

    (@twentig)

    5 years, 5 months ago

    Hi @mibtg,

    You need to put the CSS code inside Customizer > Additional CSS:

    #The-Game {
	padding-top: 150px; 
	margin-top: -150px;
}

    Then remove the code you’ve entered in the Additional CSS Class(es) area, as it’s used only to add CSS class, not inline code.

    If you enjoy Twentig, please leave a review. It would really help me out 🙂
    Tom

    Thread Starter mibtg

    (@mibtg)

    5 years, 5 months ago

    That worked Perfect. thank you for the answer.

    • This reply was modified 5 years, 5 months ago by mibtg.
    Volodymyr

    (@namzzz)

    5 years, 2 months ago

    Tom, thanks for solution! Works perfectly fine @ Safari.

    It’s been a pain in **s for a while)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Anchors not working with Sticker header’ is closed to new replies.