En besøkende lander på nettstedet ditt, åpner «Tjenester»-siden og kan ikke umiddelbart se hvor de befinner seg. Menyelementene ser identiske ut. Det finnes ingen aktiv tilstand. Dette er ikke en WordPress-feil; som standard er ikke et tema pålagt å utheve det aktive elementet. Men noen få linjer med CSS løser problemet på under ett minutt.

WordPress har automatisk tildelt et sett med CSS-klasser til hvert menyelement siden versjon 3.0. Tre av dem indikerer «brukeren er for øyeblikket på denne siden eller inne i denne seksjonen». Alt du trenger å gjøre er å skrive stilene, så blir navigasjonen tydelig uten et eneste klikk.

💡 Kort oversikt:

• Åpne nettleserens inspector og finn CSS-selektoren for nettstedets meny
• Legg til 3-5 linjer med CSS i Tilpasser eller style.css som retter seg mot klassene .current-menu-item, .current-page-ancestor og .current-post-ancestor
• Hvis nettstedet har flere menyer, avgrens selektoren slik at uthevingen bare gjelder hovedmenyen
• I blokktemaer (FSE) er fremgangsmåten den samme, men CSS legges til via nettstedsredigereren

Hvilke klasser WordPress legger til menyelementer

Når WordPress renderer en meny via wp_nav_menu(), får hvert <li>-element flere klasser. Her er de tre som styrer «aktiv»-tilstanden:

.current-menu-item tildeles elementet hvis lenke peker til den gjeldende siden. Åpne «Kontakt», så får menyelementet «Kontakt» denne klassen. Den mest rett frem og mest brukte.

.current-page-ancestor utløses når brukeren er på en underside mens menyelementet peker til foreldresiden. For eksempel, menyen inneholder «Portefølje» og den besøkende leser en case-studie inne i den seksjonen. Foreldreelementet «Portefølje» får ancestor-klassen, slik at du også kan utheve det og vise hvilken seksjon av nettstedet brukeren er i.

.current-post-ancestor er det samme konseptet, men for innlegg og kategorier. Hvis et menyelement lenker til kategorien «Nyheter» og leseren åpner en bestemt artikkel fra den kategorien, vil «Nyheter»-elementet bære denne klassen.

WordPress tildeler alle tre klassene automatisk. Du trenger ikke å skrive PHP-betingelser eller redigere maler manuelt, i motsetning til WP 2.9-tiden og tidligere, da hver lenke måtte pakkes inn i en if-sjekk mot gjeldende URL. I dag kan du bare åpne inspector og se hvilken klasse som allerede er knyttet til målelementet.

Trinn 1: Finn menyselektoren

Åpne nettstedet ditt, trykk F12 (utviklerverktøy) og finn <ul>- eller <nav>-elementet som inneholder menyelementene. Det ser vanligvis slik ut:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Legg merke til identifikatoren (#primary-menu) eller klassen (.main-navigation) til menyen din. Dette er selektoren vi vil bruke i neste trinn for å begrense omfanget av CSS-en.

I klassiske temaer blir menyer oftest renderet via wp_nav_menu() med et theme_location-argument som 'primary'. CSS-klasser tildeles av funksjonen nav_menu_css_class, og et filter med samme navn lar utviklere legge til eller fjerne klasser programmatisk. Men for grunnleggende utheving trengs ingen kode, bare CSS.

Trinn 2: Legg til uthevings-CSS

Den enkleste og tryggeste tilnærmingen er å sette inn stiler via den innebygde Tilpasser. I WordPress-admin, gå til Utseende → Tilpass → Ekstra CSS.

Kopier og lim inn:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

Hva denne koden gjør: når et menyelement mottar klassen .current-menu-item, endrer lenken tekstfarge til hvit og bakgrunn til blå, pluss litt avrunding. Resultatet er synlig umiddelbart i Tilpasser-forhåndsvisningen, før lagring.

For finere kontroll kan du også utheve ancestors:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Her er det, i stedet for en fyll, en understreking med en blå strek. Dette alternativet ser renere ut i minimalistiske temaer.

Trinn 3: Begrens omfanget

Hvis nettstedet ditt har flere menyer (hovedmeny i toppteksten, sekundærmeny i bunnteksten, en widget-meny i sidepanelet), vil CSS-en fra forrige trinn utheve det aktive elementet overalt. Det er sjelden ønskelig.

Foranstill klasse-selektoren med ID-en eller klassen til den spesifikke menyen du fant i trinn 1:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Nå vil uthevingen bare utløses inne i elementet med id="primary-menu". Andre menyer på nettstedet forblir uendret.

Hvis temaet ditt bruker en klasse i stedet for en ID, skriv .main-navigation .current-menu-item > a. Prinsippet er det samme.

Hva med blokktemaer (FSE)

I blokkbaserte temaer (Twenty Twenty-Four, Twenty Twenty-Five og lignende) finnes det ingen klassisk Tilpasser med et Ekstra CSS-felt. Menyer bygges via Navigasjonsblokken.

CSS legges til via nettstedsredigereren: Utseende → Rediger → Stiler → tre prikker (meny) → Ekstra CSS. Koden er nøyaktig den samme; WordPress fortsetter å tildele .current-menu-item og andre klasser også i blokktemaer.

Forskjellen er selektoren. I FSE er menyomslaget en <nav> med en klasse som .wp-block-navigation. Bekreft selektoren via inspector og foranstilt den til de aktive element-klassene:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Hvis nettstedet ditt kjører på et moderne tema og menyen ikke utheves «rett ut av esken», sjekk om temaet selv overstyrer lenketilstander via :hover og :focus uten stiler for .current-menu-item. Løsningen er å legge til en selektor med lik spesifisitet.

Dypere meny-tilpasning (fra megamenyer til mobilnavigasjon) dekkes i en egen artikkel. Den inkluderer også en plugin-oversikt for tilfeller der CSS ikke lenger er nok: fra gratis byggere til profesjonelle løsninger med rutenett og ikoner.

⁉️🤔 Ofte stilte spørsmål

Hvorfor utheves ikke menyen etter at jeg har lagt til CSS-en?

Den vanligste årsaken er at selektoren ikke samsvarer med den faktiske HTML-strukturen. Åpne inspector (F12), klikk på det aktive menyelementet og sjekk: har <li>-elementet klassen .current-menu-item? Hvis klassen mangler, anser ikke WordPress denne siden som «gjeldende» for det elementet. Dette kan skje med egendefinerte innholdstyper eller plugins som overstyrer meny-logikk. Løsning: registrer den egendefinerte typen med 'show_in_nav_menus' => true eller legg til støtte via nav_menu_css_class-filteret.

Kan jeg utheve et menyelement med en annen farge for hver side?

Ja. WordPress legger til en unik klasse som .menu-item-{ID} til hvert element, for eksempel .menu-item-42. Bruk inspector til å finne ID-en til målelementet og skriv: .menu-item-42 > a { background: #d63638; }. Dette lar deg fargekode menyen for å matche nettstedets seksjoner.

Hvordan uthever jeg et menyelement hvis det er en ekstern lenke eller et anker?

En ekstern lenke vil ikke motta .current-menu-item fordi den peker til et annet nettsted, og WordPress kan ikke identifisere den som «gjeldende». For ankere på samme side utløses klassen heller ikke. I disse tilfellene legger du til en egendefinert CSS-klasse til elementet manuelt: Utseende → Menyer → Skjerminnstillinger → kryss av for CSS-klasser, skriv deretter inn klassen din i elementinnstillingene og stil den.

Er det trygt å legge til CSS via Ekstra CSS i Tilpasser?

Ja. Stiler fra dette feltet lagres i databasen og går ikke tapt når temaet oppdateres, i motsetning til redigeringer i style.css i et child theme som kan bli overskrevet ved et uhell. Feltet har vært tilgjengelig siden WordPress 4.7 og støttes av praktisk talt alle klassiske temaer.

Er det verdt innsatsen: tre-linjers oppsummering

Å utheve det aktive menyelementet er ikke et designinnfall; det er en navigasjonsmessig grunnlinje. Uten den bruker besøkende ekstra sekunder på å orientere seg. Med den er nettstedets struktur tydelig ved første øyekast.

Oppgaven håndteres fullt ut av tre klasser: .current-menu-item, .current-page-ancestor og .current-post-ancestor. Det får plass i fem linjer med kode. Implementering tar tre minutter via Tilpasser.

Hvis du trenger mer (ikke-standard menyoppførsel, betinget utheving etter brukerrolle eller egendefinerte indikatorer), se oversikten over 15+ meny-plugins. For grunnleggende utheving er CSS nok.