We zorgen dat een fixed-top navbar nooit content overlapt. De offset past zich
automatisch aan de hoogte van de navbar aan (ook bij mobiel uitklappen). Bovendien werken
ankers (interne links) netjes en voegen we een skip-link toe.
Plaats de skip-link helemaal bovenaan <body> en geef je hoofdinhoud een
anker-id (bv. main-content).
<!-- helemaal boven in <body> -->
<a href="#main-content" class="skip-link">Ga naar hoofdinhoud</a>
<!-- je navbar gebruikt fixed-top (stap 3) -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top" id="site-navbar" data-bs-theme="light">...</nav>
<!-- hoofdinhoud -->
<main id="main-content" class="container">
<h1 class="pt-4">Titel boven de vouw</h1>
<p>Inhoud die niet onder de navbar mag verdwijnen.</p>
</main>
Voeg dit toe aan assets/css/custom.css (na je tokens en navbar-thema).
/* ---- Dynamische navbar-offset (wordt via JS gezet) ---- */
:root{ --nav-offset: 0px; }
/* Alleen als er een fixed nav is, duwen we de content omlaag */
body.has-fixed-nav{ padding-top: var(--nav-offset); }
/* Ankerklikken (bv. #sectie) houdt rekening met navbar-hoogte */
html{ scroll-padding-top: calc(var(--nav-offset) + 1rem); }
/* Toegankelijke skip-link */
.skip-link{
position: absolute;
left: -10000px;
top: auto;
width: 1px; height: 1px;
overflow: hidden;
}
.skip-link:focus{
left: 1rem; top: 1rem; width: auto; height: auto;
padding: .5rem .75rem;
background: var(--brand-primary);
color: #fff; text-decoration: none;
border-radius: .5rem;
z-index: 1100; /* boven navbar */
}
/* Hero (zonder parallax) die mooi onder fixed nav start */
.hero{
min-height: 50vh;
display: grid; place-items: center;
background: linear-gradient(180deg, rgba(0,0,0,.04), transparent);
border-radius: .75rem;
}
Breid assets/js/main.js uit. Dit script zet --nav-offset én een body-class als je navbar fixed-top is.
document.addEventListener('DOMContentLoaded', () => {
const nav = document.getElementById('site-navbar');
const body = document.body;
const updateOffset = () => {
if (!nav) return;
const isFixed = nav.classList.contains('fixed-top');
if (isFixed) body.classList.add('has-fixed-nav');
else body.classList.remove('has-fixed-nav');
// hoogte inclusief borders (goede benadering)
const h = Math.ceil(nav.getBoundingClientRect().height);
document.documentElement.style.setProperty('--nav-offset', h + 'px');
};
updateOffset();
window.addEventListener('resize', updateOffset, { passive: true });
// Recompute na open/dichtklappen van het mobiele menu
document.addEventListener('shown.bs.collapse', updateOffset);
document.addEventListener('hidden.bs.collapse', updateOffset);
});
Plaats onder je navbar een eenvoudige hero (zonder parallax) om de offset te testen.
<header class="container my-4">
<div class="hero p-5 text-center">
<h2 class="fw-bold mb-2">Welkom!</h2>
<p class="lead mb-0">Dit is een eenvoudige hero-sectie onder een fixed navbar.</p>
</div>
</header>
<main id="main-content" class="container">
<h3 id="sectie-1" class="mt-4">Sectie 1</h3>
<p>Scroll en test ankernavigatie: <a href="#sectie-2">naar sectie 2</a>.</p>
<h3 id="sectie-2" class="mt-5">Sectie 2</h3>
<p>Klik in de navbar op een anker of hierboven om de scroll-padding te zien werken.</p>
</main>
fixed-top navbar.#sectie-2 → titel staat netjes onder de navbar.--nav-offset wordt gezet (check in DevTools → Computed → --nav-offset).body.has-fixed-nav staat aan bij fixed-top.html{ scroll-padding-top: ... } voorkomt anker-overlap.