• Erik Johnson

  • July 27, 2019 01:43

  As a workaround, I can create a manual anchor link, set a few lines higher than the header — but that means source code for each anchor, and if I adjust the text of an article the anchor might not head to the right spot anymore. 

• Maggie Ungerboeck

  • July 28, 2019 18:03

  Community Moderator

  Hi Erik,

  You aren't the only one that has this same problem - we have it too. We use the same workaround that you do. Interested to see if anyone else has been able to find a better solution.

  Thanks,

  Maggie

• Brett Bowser

  • July 29, 2019 14:12

  Zendesk Community Manager

  Hi Erik,

  Great question!

  I'm going to get this post added to our monthly Community Roundup to help get more eyes on your question.

  Cheers :)

• Erik Johnson

  • July 30, 2019 16:49

  Thank you!

• Nicky Lilja

  • August 09, 2019 05:19

  I have the same problem!  Would be great to get a solution. :)

• Floris Bijker

  • August 13, 2019 11:15

  It's because your Nav bar has a CSS property of "position: fixed". Block elements can have this, and it means they are detatched from the normal flow of your document, and get fixed to the viewport instead. So your page kind of disappears behind it. 

  I guess there's a few solutions for it. Easiest would be this one: https://grobmeier.solutions/div-starting-after-fixed-div-28082015.html

  Or you could go the jQuery route with this: https://stackoverflow.com/questions/4797350/how-to-clear-content-from-a-position-fixed-element-of-variable-height

  Hope that helps.

• Erik Johnson

  • August 14, 2019 00:50

  Thanks Floris! I just today found a solution that worked, and it's along the same lines, I think. Just CSS instead of jQuery. 

  Our Zendesk rep did some digging, and found this post, which had the answer: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header

  The solution posted there did not help, because it moved the header itself and stuffed it somewhere else in the text. 

  But by combining :target with one of the comments on that post, I found a solution that worked beautifully.

  :target {
  padding-top: 79px;
  margin-top: -79px;
  display: inline-block;
  }

  If I understand what that's saying (it's likely I don't), it's giving anchor link targets a padding that's the height of our top level banner (≈80px). 

  Whatever it's saying, slapping that into style.css worked immediately. I just need approval to move it from my little sandbox theme to production and we'll be off and running. 

  Hope this helps other folks!

• Duane Knudsen

  • August 14, 2019 13:24

  Erik, this is genius!!! Works perfect, just copy/pasted to the very end of css. Already moved to production. This has been a bit of a sore spot for us and I've been looking for this exact solution.

  THANK YOU!

• Sean Needham

  • July 31, 2020 12:44

  Thank you Erik!!

  This worked for us too!!

  I really appreciate the help. Have a great day :)

• Nicole Saunders

  • July 31, 2020 16:57

  Zendesk Community Manager

  @... if you would consider posting your answer as a tip in our User Tips & Tricks section, that would make it easier for users to find, and we'll send you a small thank you gift for doing so. :)

Please sign in to leave a comment.