Sometimes, we want to fix fixed page header overlapping in-page anchors with CSS.
In this article, we’ll look at how to fix fixed page header overlapping in-page anchors with CSS.
How to fix fixed page header overlapping in-page anchors with CSS?
To fix fixed page header overlapping in-page anchors with CSS, we shift the content below the header.
For instance, we write
:target::before {
content: "";
display: block;
height: 60px;
margin: -60px 0 0;
}
to select the :target::before pseudo-element, which is the header, which has class target.
We fix the header height with height: 60px;.
And we shift the header up with margin: -60px 0 0;. The top margin is -60px, which shifts it up by 60px.
Conclusion
To fix fixed page header overlapping in-page anchors with CSS, we shift the content below the header.
