Elementor-hamburgermenyen virket ikke: en JavaScript-feil i konsollen

En ødelagt hamburgermeny er et reelt brukervennlighetsproblem på mobil. Navigasjonen er synlig, brukeren trykker på den, og ingenting skjer. Akkurat dette hadde et WordPress-nettsted hos en av kundene våre. Først så det ut som en typisk Elementor- eller bufringsfeil, men nettleserkonsollen fortalte en annen historie. En enkelt JavaScript-syntaksfeil fra en urelatert plugin brøt i det stille alle interaktive elementer på siden.

Kort om oppdraget

• Plattform: WordPress og Elementor, med flere Elementor-relaterte plugins, blant dem ElementsKit
• Symptom: Hamburgermenyen var synlig på mobil, men åpnet seg ikke når man trykket på den
• Årsak: Én linje i utskriften fra en plugin. En URL ble skrevet inn i et skript uten anførselstegn, og nettleseren stoppet på den med en syntaksfeil
• Tilnærming: Konsollen først, sidekilden deretter, og en løsning som lar pluginens kjernefiler være i fred

Problemet

Nettstedet var bygget på WordPress og Elementor med flere Elementor-relaterte plugins. På mobil ville ikke hamburgermenyen åpne seg. Det symptomet kan komme fra en rekke urelaterte årsaker, og det er en del av det som gjør det vanskelig å feilsøke:

• Pluginkonflikt
• JavaScript-feil
• Buffer- eller minifiseringsproblem
• Problem med innlasting av Elementor-ressurser
• Temakompatibilitetsproblem
• Blandet innhold eller blokkerte ressurser

Nettleserkonsollen viste først en blanding av advarsler og feil. Etter at vi deaktiverte Google Fonts og ryddet opp i litt innlastingsstøy, var det én feil som ble igjen, og det var den viktige:

Uncaught SyntaxError: unexpected token: ':'

Dette er viktig fordi en JavaScript-syntaksfeil ikke holder seg avgrenset. Den kan stoppe andre interaktive deler av siden fra å kjøre. Mobilmenyer, slidere, popups, faner og Elementor-widgeter er alle avhengige av at JavaScript kjører feilfritt.

Hovedfunnet

Da vi sjekket sidekilden, pekte den rett mot linjen som forårsaket problemet:

<script type="text/javascript">
var elementskit_module_parallax_url = https://example.com/wp-content/plugins/elementskit/modules/parallax/;
</script>

URL-en ble skrevet ut direkte, uten anførselstegn rundt seg. I JavaScript må en URL lagres som en streng. Uten anførselstegn leser nettleseren https: som ugyldig syntaks, og det er det som skaper konsollfeilen.

Riktig utskrift bør se slik ut:

<script type="text/javascript">
var elementskit_module_parallax_url = "https://example.com/wp-content/plugins/elementskit/modules/parallax/";
</script>

Hvorfor dette ødela hamburgermenyen

Hamburgermenyen er avhengig av JavaScript for å åpne og lukke mobilnavigasjonen. Når nettleseren støter på en syntaksfeil, kan den stoppe kjøringen av det aktuelle skriptet og påvirke skript som lastes inn etterpå. Så selv om menyen var riktig designet og satt opp, kjørte klikkhåndtereren aldri. JavaScript-miljøet var allerede ødelagt før den rakk å starte.

Menywidgetene i Elementor fungerer slik. I Elementors egen Nav Menu-widget velger du for eksempel om mobilmenyen skal slå inn på mobil eller nettbrett, og om hamburgerikonet skal vises som knappen som åpner den. Byggeverktøyet plasserer knappen. Det er JavaScript som åpner og lukker menyen når noen trykker på den.

To detaljer forklarer hvor langt én feil linje kan nå. Nettleseren tolker hele skriptet før den kjører noe av det, så et skript som ikke lar seg tolke, kjøres ikke i det hele tatt: HTML-standardens regler for å kjøre skript rapporterer feilen i stedet for å kjøre koden. Derfor ble variabelen på den linjen aldri opprettet. Og kode som senere leser en variabel som ikke finnes, stopper der med en ReferenceError. Har en buffer- eller minifiseringsplugin slått sammen flere skript til én fil, stopper én syntaksfeil hele den sammenslåtte filen.

Det er derfor et visuelt byggeverktøy som Elementor kan vise et perfekt oppsett mens det publiserte nettstedet har ødelagt funksjonalitet. Designet og kjøremiljøet er to forskjellige ting.

Slik feilsøkte vi

Vi jobbet oss gjennom problemet i rekkefølge, fra symptom til rotårsak:

1. Reproduserte oppførselen til mobilmenyen.
2. Åpnet nettleserkonsollen for å identifisere JavaScript-feil.
3. Deaktiverte Google Fonts og problemer med blandet innhold for å redusere støy.
4. Isolerte den gjenværende JavaScript-syntaksfeilen.
5. Sjekket sidekilden for å finne den feilaktige skriptutskriften.
6. Identifiserte plugin-variabelen som forårsaket problemet.
7. Planla en trygg løsning uten å redigere plugin-kjernefiler.

Anbefalt løsning

Den tryggeste løsningen er ikke å redigere plugin-filene direkte. En oppdatering av pluginen vil overskrive endringen, og feilen kommer rett tilbake. I stedet sjekker vi lagene som kan produsere eller rette opp den feilaktige utskriften:

• Om Elementor og ElementsKit er fullstendig oppdatert.
• Om problemet kommer fra en plugin-innstilling.
• Om en buffer- eller minifiseringsplugin endrer skriptutskriften.
• Om en egendefinert kodesnutt eller en temafunksjon skriver ut URL-en feil.
• Om funksjonen bak det, parallax i dette tilfellet, rett og slett kan deaktiveres hvis den ikke er i bruk.

Hvis en patch fortsatt er nødvendig, legges den i et child-tema eller en liten egendefinert funksjonsplugin, aldri i plugin-kjernen.

Resultat

Når den ugyldige JavaScript-utskriften er rettet, testes løsningen på mobil, nettbrett og desktop. Forventet resultat:

• ✅ Hamburgermenyen åpner seg riktig
• ✅ Syntaksfeilen i konsollen er borte
• ✅ Elementor-widgetene fungerer normalt
• ✅ Ingen plugin-kjernefil er redigert direkte
• ✅ Nettstedet forblir trygt for fremtidige oppdateringer

Sjekk dette på ditt eget nettsted

Dette er de samme stegene vi tok her, i en form du kan gjøre selv før noen redigerer en eneste fil.

• Åpne konsollen først. I Chrome åpner Ctrl+Shift+J på Windows og Linux eller Cmd+Option+J på Mac utviklerverktøyene rett i konsollen. Last inn siden på nytt, trykk på menyen som ikke virker, og se etter røde feil.
• Fjern støyen. Konsollen kan filtreres slik at den bare viser feil. Her var meldingene om fonter og blandet innhold støy, mens den ene syntaksfeilen som ble igjen, var årsaken.
• Behold loggen mellom innlastinger. Konsollen tømmes hver gang en ny side lastes. Slå på innstillingen som bevarer loggen («Preserve log» i den engelske versjonen) hvis feilen kommer og går mens du klikker deg rundt.
• Les feilen, så kilden. En SyntaxError betyr at et helt skript aldri kjørte. Søk i sidekilden etter variabelen eller URL-en rundt feilen. Her pekte variabelnavnet elementskit_module_parallax_url rett på pluginen som skrev den ut.
• Endre ett lag om gangen. Oppdater, sjekk pluginens innstillinger og test med buffer og minifisering slått av før du bestemmer at det trengs en patch. Trengs den, legges den i et child-tema eller en liten funksjonsplugin, så neste oppdatering ikke fjerner den.

Viktig lærdom

En ødelagt hamburgermeny i Elementor har ofte ingenting med selve meny-widgeten å gjøre. En liten JavaScript-syntaksfeil fra en urelatert plugin kan slå ut alle interaktive elementer på siden. Å sjekke nettleserkonsollen først er en av de raskeste måtene å finne den egentlige årsaken til et frontend-problem i WordPress, i stedet for å gjette seg til løsninger. Den samme vanen, å lese hva nettleseren faktisk melder før man endrer noe, løste et nettsted som hadde mistet hele designet på grunn av én mappetillatelse.

---

Virker ikke menyen på nettstedet ditt?

Har hamburgermenyen, mobilnavigasjonen, en popup, en slider eller en annen interaktiv del av nettstedet sluttet å virke, finner vi årsaken når vi fikser WordPress. Vi sjekker JavaScript-feil, pluginkonflikter, Elementor-innstillinger, buffer og temakompatibilitet, og retter feilen uten å redigere kjernefilene til pluginene, så neste oppdatering ikke tar den bort. Diagnosen er gratis, en konkret feil har fastpris fra 1 990 kr eks. mva, og klarer vi ikke å løse den, betaler du ingenting. Er det heller en justering eller et spørsmål om Elementor enn en feil, tar vi det som WordPress-hjelp til 990 kr/t, uten binding. Beskriv hva menyen gjør, gjerne med feilmeldingen fra konsollen.