CSS: How to prevent anchor links from scrolling behind fixed header? - html

Question

I am designing a code documentation webpage having a similar design like stackoverflow. I am listing the details below:
fixed header
sticky sidebar.
The sidebar is an anchor menu linking to each section header.
The problem is that when I click on a link, the page jumps to the corresponding section, but the header is hidden behind the fixed header.
* {
margin: 0;
}
header {
position: fixed;
padding: 1em;
width: 100vw;
background-color: #ccc;
}
main {
padding-top: 6em;
width: 700px;
margin: auto;
}
section {
margin-bottom: 3em;
}
<header>
<h1>Title</h1>
</header>
<main>
Click me to visit - Eaque, voluptatum tempore.
<section>
<h2>Lorem, ipsum dolor.</h2>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore unde animi ratione inventore laudantium architecto nobis voluptates rem sed veritatis eaque eum id ab eligendi, ipsum earum a, fuga impedit consequuntur, iste officia voluptate commodi?
Asperiores illo repellendus earum laboriosam accusamus ex amet delectus quo voluptatibus, temporibus natus dolores praesentium dignissimos. Excepturi optio praesentium corrupti vitae ratione tenetur dolores voluptatem.</p>
</section>
<section>
<h2>Accusamus, saepe nam?</h2>
<br>
<p>Distinctio quo tenetur molestiae asperiores! Ratione tempore recusandae mollitia et maiores, veritatis in animi officiis consectetur, quo reprehenderit possimus porro maxime amet modi deserunt iste. Qui vitae quasi tenetur totam adipisci unde deleniti
commodi iure beatae recusandae esse, explicabo incidunt placeat. Nemo, dolore? Perferendis expedita omnis consectetur facilis enim voluptate ratione ad consequuntur minus, ea debitis, itaque quas fugit minima?</p>
</section>
<section>
<h2>Soluta, at officiis.</h2>
<br>
<p>Eum accusantium, rerum nulla, esse in quas consequuntur earum a culpa voluptates repellendus? In repellendus quasi quam, nesciunt, ullam adipisci autem reiciendis rem laborum eos repudiandae. Dolores quasi ducimus quis, iusto laborum nihil. Temporibus,
ratione iure sequi exercitationem voluptates id expedita ut quo repellat dolorum, officiis mollitia accusantium? Debitis, nobis. Quo exercitationem est impedit aliquam, a expedita saepe totam? Non.</p>
</section>
<section>
<h2>Mollitia, modi deleniti!</h2>
<br>
<p>Earum iusto nesciunt, rerum laboriosam velit, cumque perferendis accusamus laborum officia voluptates enim at quidem beatae. Asperiores soluta ullam aperiam suscipit tenetur officiis blanditiis cumque. Laboriosam ut itaque magni a voluptatibus, tenetur,
consequuntur temporibus rem obcaecati consectetur at laborum, hic perspiciatis aliquid voluptate excepturi minima voluptates eius iste. Possimus culpa sit expedita. Esse quos ipsum recusandae, unde laudantium repudiandae ipsa!</p>
</section>
<section>
<h2 id="link">Eaque, voluptatum tempore.</h2>
<br>
<p>Excepturi, fugit ipsam nesciunt neque harum a magnam adipisci eius velit. Dignissimos praesentium voluptatem laboriosam corporis minus soluta aperiam eius repellendus architecto pariatur vitae dolores ipsam consectetur eligendi optio fugit laborum
ratione aliquam provident tenetur explicabo qui, officiis veniam. Ipsum minima molestias quibusdam quos delectus voluptates. Et rerum quia modi? Corrupti corporis minus necessitatibus quod earum, cupiditate amet porro eveniet.</p>
</section>
</main>
How can I fix this so that the header is visible?

Answer 1

I am answering my own question since I found out a better solution to the problem.
So, to fix this, we can use the pseudo class :before.
.anchor:before {
display: block;
content: "";
height: 5em;
width: 0;
position: relative;
margin-top: -5em;
}
Why shouldn't we use padding?
Adding a padding to the top will solve the problem for some cases, but it may add too much white space. Whereas, using :before, we don't need to think about it.

Answer 2

The answer above is better. Use :Before.
Old answer:
Put this above your header:
<h1><a class="anchor" name="anchor">Bar</a></h1>
with these CSS:
.anchor { padding-top: $your amount of padding$ px; }