> ## Content Index > Fetch the complete content index at: https://getpublii.com/blog/llms.txt > Use this file to discover other available public pages before exploring further. # One line CSS solution to prevent anchor links from scrolling behind a sticky or fixed header - URL: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html - Published: 2020-12-03T18:35:59.446Z - Updated: 2025-10-31T06:57:47.597Z - Description: A sticky or fixed menu is a very popular UX solution that displays a navbar at the top of the page to provide access to menu items at all times, even while scrolling pages. This simple addition can make it… - Author: Bob Mitro - Tags: CSS A sticky or fixed menu is a very popular UX solution that displays a navbar at the top of the page to provide access to menu items at all times, even while scrolling pages. This simple addition can make it much easier for users to jump between your site content, especially on long-form pages. However, while this method works well in general use, if a page uses anchors in the menu to allow users to jump to specific sections of the page instantly, we run into an issue. When an anchor is clicked, The page will scroll to position the anchor at the very top of the viewport, meaning that the fixed menu will obscure the section title and perhaps even part of the content. ![Sticky header covering an anchor section](https://getpublii.com/blog/media/posts/62/sticky-menu-anchor-scroll-padding-3.svg) Caption: Sticky header covering an anchor section So far, the standard solution has been to add top margin and padding to the anchor sections, but this has often resulted in a lack of control over the spaces, preventing fine-tuning of the page layout. Fortunately, we have a new, simple, one-line CSS solution: **scroll-margin-top** and **scroll-padding-top**. ## The scroll-padding-top property The `scroll-padding-top` property is applied to the parent container and acts just like a CSS top padding, defining offsets from the top of the scrolling area. ```css scroll-padding-top: ; ``` You can use any `px`, `em`, `rem`, `vh`, `%`, etc. value, as well as `auto`, where the user agent determines the offset as 0px. ### Let see how it works You could add the `scroll-padding-top` CSS property to an `HTML` element with a value of `4rem`. Now when you click the anchor link, the browser jumps to the anchor section but leaves padding of `4rem` at the top, rather than scrolling the anchor point all the way to the top. With this, when the height of the sticky menu is `3rem`, the section the anchor point scrolls to will be wholly visible, separated from the sticky menu by that extra `1rem`. ```html

Your stuff here

``` ```css html { scroll-padding-top: 4rem; } nav { height: 3rem; position: sticky; top: 0; } ``` That's it. ## The scroll-margin-top property The `scroll-margin-top` property, in simple terms, defines the top margin of the anchor sections (i.e. the container‘s children) that the browser will use when snapping the scrolled element into place. ```css scroll-margin-top: ; ``` This property refers to the values defined with length units: `px`, `em`, `rem`, `vh`, etc. The end result of using the scroll-margin-top property will be basically the same as when using scroll-padding-top, in that the scrolled section will be visible and separated slightly from the top of the viewport to allow room for the menu, but it achieves this result via a different method. ### Let see how it works The `scroll-margin-top` property should be applied to each anchor `section`, and these sections will then leave a margin of `4rem` at the top. ```html

Your stuff here

``` ```css nav { height: 3rem; position: sticky; top: 0; } section { scroll-margin-top: 4rem; } ``` What's important to remember with these properties is that they both apply only to scroll-snapping, so they do not affect the actual padding of the HTML element or the defined margin between anchor sections. Browser support for these solutions is great, as you can see here: [scroll-margin-top](https://caniuse.com/?search=scroll-margin-top), [scroll-padding-top](https://caniuse.com/?search=scroll-padding-top), so we can make use of them immediately with no ill-effects.