/* ========================================================== header.css Doel: Topbar + menu responsive (mobiel / pc / tv) Vereisten: - - nav links hebben class "nav-link" ========================================================== */ /* ========================================================== Topbar basis ========================================================== */ .topbar{ position: sticky; top: 0; height: var(--topbar-h); display: flex; align-items: center; z-index: 1000; background: linear-gradient(180deg, rgba(8,26,44,.88), rgba(8,26,44,.72)); border-bottom: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); } /* Inhoud begrenzen */ .topbar .container{ width: 100%; padding: 10px 12px; } /* ========================================================== Navigatie basis ========================================================== */ .topbar nav{ display: flex; align-items: center; gap: 8px; /* Mobiel: horizontaal scrollbaar */ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding: 0 2px; scroll-snap-type: x proximity; } .topbar nav::-webkit-scrollbar{ display:none; } /* Menu links */ .topbar nav a.nav-link{ flex: 0 0 auto; white-space: nowrap; text-decoration: none; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: var(--text); scroll-snap-align: start; transition: background .12s ease, border-color .12s ease; } .topbar nav a.nav-link:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); } /* Actieve pagina */ .topbar nav a.nav-link.is-active{ background: rgba(127,199,255,.16); border-color: rgba(127,199,255,.28); } /* ========================================================== Mobiel tweaks ========================================================== */ @media (max-width: 640px){ :root{ --topbar-h: 54px; } .topbar .container{ padding: 8px 10px; } .topbar nav a.nav-link{ padding: 7px 10px; font-size: .95rem; } } /* ========================================================== Desktop ========================================================== */ @media (min-width: 900px){ /* Desktop mag weer wrappen */ .topbar nav{ flex-wrap: wrap; overflow: visible; scroll-snap-type: none; } } /* ========================================================== TV / grote schermen ========================================================== */ @media (min-width: 1400px){ :root{ --topbar-h: 72px; } .topbar .container{ padding: 12px 16px; } .topbar nav a.nav-link{ padding: 10px 14px; font-size: 1.05rem; } } /* ========================================================== Prikbord-specifiek (optioneel) → iets compactere header voor dashboard gevoel ========================================================== */ @media (min-width: 1000px){ .page-prikbord .topbar{ height: 56px; } }