About Anchor Links on Pages with Fixed Top Navigation
When using fixed top navigation, the navigation covers the top of the page and all anchors are covered by default. To fix that visually, give the anchor relative positioning and negative top placement, like this:
Link HTML:
<a href="#faq">FAQ</a>
Section HTML:
<section>
<a class="section-anchor" id="faq">⚓️</a>
<h1>Frequently Asked Questions</h1>
…
</section>
CSS:
.section-anchor {
position: relative;
height: 0;
overflow: hidden;
visibility: hidden;
top: -3em; /* minus the height of the top navigation */
}
Django/Python Consulting
If you have a specific Django challenge or integration you'd like to solve, I'd be happy to help. Book a free 30-minute call to discuss your project, see if we're a good fit, and explore the best approach for your needs. After the call, you'll receive a tailored cost estimate based on what we discuss.
Also by me
Django Messaging
For Django-based social platforms.
Django Paddle Subscriptions
For Django-based SaaS projects.
Django GDPR Cookie Consent
For Django websites that use cookies.
