Web Services Blog

Give your anchors some space

Attention web editors working in Cascade templates: here’s a quick tip to improve user experience.

If you’ve encountered issues with anchor tags scrolling under fixed headers, worry no more. With the .anchor-space class, you can easily add some top space to your anchor tags, ensuring they can still be in the viewport even with fixed header in place.

Simply apply the .anchor-space class to your anchor tags. No more content hidden under fixed header. This should clear up some user confusion.

Check out the example below:

<h2>
  <a id="reading-order" class="anchor-space"></a>
  Reading Order
</h2>
Webpage with Clemson logo in the header showing space before the header where the anchor is located.

This is still dev-only but will soon be pushed to production.



Leave a Reply

Your email address will not be published. Required fields are marked *