16/04/2024
Divi, et af de mest populære WordPress-temaer, tilbyder en fantastisk fleksibilitet, når det kommer til design af din hjemmeside. En af de funktioner, mange designere og udviklere ønsker at udnytte, er Divi's mobilmenu-stil. Normalt viser Divi én navigationsmenu-stil for skriveborde og en anden, den velkendte hamburger-menu, for tablets og mobile enheder. Men hvad nu, hvis du ønsker at anvende denne mobile menu-stil – den med den ikoniske 3-linjers hamburger-knap – på dine desktop-visninger? Det kan give et rent og moderne udseende, der sparer plads og tiltrækker brugerens opmærksomhed. Denne guide vil vise dig præcis, hvordan du opnår dette ved at tilføje lidt CSS-kode til din Divi-opsætning.
Forstå Divi's Responsivitet
Divi er bygget med responsivitet i tankerne. Når skærmstørrelsen på en enhed reduceres, aktiveres et såkaldt 'mobile breakpoint'. Dette breakpoint udløser ændringen i navigationens udseende, så den konverteres til den mobile stil. Omvendt, når skærmstørrelsen øges igen og passerer dette breakpoint, vender menuen tilbage til sin desktop-standard. Den mobile menu i Divi er typisk kendetegnet ved en hamburger-ikon, der normalt er placeret i øverste højre hjørne af skærmen. Når dette ikon klikkes, åbnes en drop-down menu med alle dine navigationslinks.
For at få Divi's mobile menu til at blive vist på desktops – ud over på tablets og mobiler – skal vi justere det mobile breakpoint. Dette gøres ved at tilføje specifik CSS-kode. Denne kode kan indsættes på to primære steder i din Divi-opsætning:
- Divi Theme Options: Gå til Divi > Theme Options i dit WordPress-dashboard. Her finder du et felt til 'Custom CSS', hvor du kan indsætte koden.
- Divi Child Theme Stylesheet: Hvis du bruger et child theme (hvilket anbefales for at bevare dine ændringer under temaopdateringer), kan du indsætte koden i filen style.css i din child theme-mappe.
Her er den CSS-kode, du skal bruge:
/* Display Divi mobile menu on desktop */ @media (min-width: 980px) { .et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu { display: none; } .et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu { display: flex; float: none; margin: 0 5px; } } Hvordan Koden Virker
Lad os bryde denne CSS-kode ned for at forstå, hvad den gør:
- `@media (min-width: 980px)`: Dette er en media query. Den specificerer, at de efterfølgende regler kun skal anvendes, når skærmbredden er mindst 980 pixels. Dette er typisk det breakpoint, hvor Divi skifter fra mobilvisning til desktopvisning. Ved at definere regler inden for denne media query, tvinger vi mobilmenuen frem på bredere skærme.
- `.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu { display: none; }`: Denne del af koden skjuler den standard desktop-menu (både den almindelige menu og den fuldskærmsmenu), når skærmbredden er 980 pixels eller mere.
- `.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu { display: flex; float: none; margin: 0 5px; }`: Denne del viser mobilmenuen (`.et_mobile_nav_menu`). Ved at sætte `display: flex;` sikrer vi, at den vises korrekt. `float: none;` fjerner eventuel uønsket floating, og `margin: 0 5px;` tilføjer en lille margen for bedre æstetik.
Resultatet af at tilføje denne kode er, at din mobilmenu nu vil blive vist på desktop-skærme. Dette giver et markant anderledes og ofte mere minimalistisk udseende.
Når du har fået mobilmenuen til at vises på desktops, er der et par yderligere justeringer, du måske ønsker at foretage for at optimere udseendet og funktionaliteten:
1. Fjernelse af Punkttegn fra Menupunkter
Mobilmenuer har ofte punkttegn foran hvert menupunkt, hvilket kan se rodet ud på en desktop-visning. For at fjerne disse punkttegn, kan du tilføje følgende CSS-kode:
.et_pb_menu .et_mobile_nav_menu li { list-style-type: none; } Denne kode specificerer, at listeelementerne (`li`) inden i mobilnavigationen (`.et_mobile_nav_menu`) ikke skal have nogen listestiltype, hvilket effektivt fjerner punkttegnene.
2. Justering af Hamburger-ikonets Placering
Selvom hamburger-ikonet som standard er i øverste højre hjørne, kan du forfine dets placering. For at sikre, at det er pænt justeret til højre i headeren, kan du bruge de indbyggede indstillinger i Divi's Menu-modul:
- Naviger til det Menu-modul, du bruger på din side, enten via sideeditoren eller Theme Builder.
- Åbn indstillingerne for Menu-modulet.
- Under sektionen Design, find indstillingerne for Menu Tekst (eller lignende, afhængigt af Divi-versionen).
- Her finder du en indstilling for Tekstjustering. Vælg den højrejusterede mulighed ved at klikke på det tilsvarende ikon.
Denne simple justering sikrer, at dit hamburger-ikon flugter pænt til højre, hvilket giver et professionelt og poleret udseende.
For at give dig et bedre overblik, lad os sammenligne de typiske karakteristika:
| Funktion | Standard Divi Desktopmenu | Aktiveret Divi Mobilmenu på Desktop |
|---|---|---|
| Visuelt Udseende | Horisontal menu med synlige links. | Hamburger-ikon (3 linjer), der åbner en drop-down menu. |
| Pladsforbrug | Kræver mere horisontal plads. | Meget pladsbesparende, ideel til minimalistiske designs. |
| Brugerinteraktion | Direkte klik på links. | Et klik for at åbne menuen, derefter klik på ønsket link. |
| Implementering | Standard Divi funktionalitet. | Kræver tilføjelse af specifik CSS-kode. |
Ofte Stillede Spørgsmål (FAQ)
Q1: Vil denne ændring påvirke min sides SEO?
A: Nej, denne ændring er rent visuel og påvirker ikke din sides SEO. Søgemaskiner fokuserer primært på indhold og struktur, ikke på menuens specifikke præsentation på desktop, så længe den er tilgængelig og funktionel.
Q2: Kan jeg stadig bruge Divi's Theme Builder til at tilpasse mobilmenuen?
A: Ja, absolut. Når mobilmenuen er aktiveret på desktop via CSS, vil alle de tilpasninger, du foretager i Divi's Theme Builder for mobilmenuen, stadig gælde.
Q3: Hvad hvis jeg vil have mobilmenuen vist på desktops under en bestemt bredde, f.eks. under 1200px?
A: Du kan justere `min-width`-værdien i media queryen. For eksempel, for at aktivere mobilmenuen på skærme under 1200px, ville du ændre `@media (min-width: 980px)` til `@media (min-width: 1200px)`.
Q4: Er der risiko for, at min hjemmeside ser "ødelagt" ud?
A: Med den angivne CSS er risikoen minimal. Det er dog altid en god idé at teste grundigt på forskellige browsere og enheder efter at have implementeret ændringen. Sørg for at have en backup af din hjemmeside, før du foretager større ændringer.
Q5: Hvorfor skulle jeg vælge at vise mobilmenuen på desktop?
A: Primært for æstetik. En hamburger-menu kan give et meget rent, moderne og minimalistisk udseende. Det kan også være en fordel, hvis du har mange menupunkter og ønsker at spare plads i headeren.
Konklusion
At aktivere Divi's mobilmenu på desktop-visninger er en relativt simpel proces, der kræver indsættelse af lidt CSS. Ved at følge denne guide kan du nemt transformere din hjemmesides navigation og opnå et unikt og moderne design. Husk at teste dine ændringer og foretag yderligere justeringer efter behov for at sikre det bedste resultat. Denne metode giver dig en ekstra grad af kontrol over dit Divi-designs udseende på tværs af alle enheder.
Hvis du vil læse andre artikler, der ligner Aktiver Divi Mobilmenu på Skriveborde, kan du besøge kategorien Teknologi.