Navbar - Förkonfigurationsexempel

Den här sidan visar hur du kan konfigurera navbar:en innan scriptet laddas genom att sätta window.NAVBAR_CONFIG i head-sektionen.

Konfiguration som används på denna sida

<script>
    window.NAVBAR_CONFIG = {
        height: 80,           // Högre navbar (standard: 70)
        scrolledHeight: 60,   // Högre även när man scrollar (standard: 40)
        backgroundColor: '#1a365d', // Mörkare blå
        hoverColor: '#fbbf24', // Gulare hover
        language: 'en',       // Engelska texter (standard: 'sv')
        logoUrl: './assets/swedac-logo-inverted.svg', // Lokal logo
        maxHeaderLength: 100, // Längre header (standard: 70)
        zIndex: 1100         // Högre z-index (standard: 1000)
    };
</script>

Alla tillgängliga konfigurationsalternativ

Egenskap	Typ	Standardvärde	Beskrivning
`height`	Number	70	Navbarens höjd i pixlar
`scrolledHeight`	Number	40	Navbarens höjd när användaren scrollar
`backgroundColor`	String	'var(--navbar-dark-blue)'	Bakgrundsfärg (CSS-färg eller variabel)
`textColor`	String	'var(--navbar-white)'	Textfärg
`hoverColor`	String	'var(--navbar-yellow)'	Färg vid hover
`zIndex`	Number	1000	CSS z-index värde
`language`	String	'sv'	Språk för texter ('sv' eller 'en')
`logoUrl`	String	(Swedac logo URL)	URL till logotyp
`maxHeaderLength`	Number	70	Maximal längd för rubriktext

Fördelar med förkonfiguration

Inga flimmer: Navbar:en får rätt utseende från start
Enkel integration: Sätt konfigurationen en gång i head
Flexibel: Du kan fortfarande använda API:et för att ändra saker dynamiskt
Bakåtkompatibel: Fungerar utan konfiguration också

Exempel på användning

Scrolla upp och ner för att se hur navbar:en beter sig med den anpassade konfigurationen. Notera:

Högre navbar (80px istället för 70px)
Mörkare blå bakgrundsfärg
Engelska texter
Även när man scrollar förblir den högre (60px istället för 40px)