Sex tips för bättre mobilmeny i Divi + gratis layout för nedladdning

✏️ 2020-05-03 | Divi | 2 Kommentarer

✅ Funkar med Divi 4 (Theme Builder) ✅ Funkar med Divi 3 (Tema-anpassaren) ✅ Kräver inga plugins ✅ Inga JavaScript som gör sidan långsam
Skribent: Victor Duse
Av Victor Duse

Uppdateringen till Divi 4 och temabyggaren har skapat nya designmöjligheter för Divis mobilmeny, men med några enkla CSS-knep kan du göra hamburgermenyn ännu bättre. Vi bjuder dessutom en gratis header-layout som du kan ladda upp i Divis temabyggare. Testad med Divi 4.4.7.

Före (Divis standardmeny)

Före: Divis meny för mobil

Efter (med sex CSS-snippets)

Efter: Divis meny för mobil

Kom igång

1. Lägg till text till vänster om hamburgermenyn

2. Ändra stäng-ikonen till ett kryss

3. Ta bort strecket i toppen

4. Centrera texten i mobilmenyn

5. Ändra mobilmenyn till fullbredd

6. Låt mobilmenyn fylla ut hela höjden

All kod samlad på ett ställe

BONUS: Ladda ner en gratis header-layout

Vi har skapat en header-mall som du kan importera i Divis Theme Builder. Layouten innehåller samtliga sex förbättringar från artikeln artikeln + en toppbar med sociala medier-ikoner och kontaktuppgifter.

Ladda ner layouten

  1. Fyll i din e-postadress nedan för att prenumerera på vårt nyhetsbrev. (Om du redan prenumererar kommer du inte att få dubbla nyhetsbrev.)
  2. Ladda header-layouten den i en zip-fil.
  3. Packa upp zip-filen på din hårddisk.
  4. Importera filen diviguiden-menylayout.json i Header-fältet i Divi > Theme Builder.
  5. Justera och använd fritt. CSS-koden ligger i en kodmodul i layouten som du enklast hittari wireframe-läget. 

Nyhetsbrevet innehåller tips, guider samt erbjudanden och skickas ut ungefär varannan månad. Du kan när som helst avsluta din prenumeration. Vi säljer aldrig dina uppgifter vidare. Din e-postadress lagras hos Mailchimp.

1. Lägg till text vänster om hamburgermenyn

Även om de tre strecken som utgör den så kallade hamburgermenyn har funnits länge kan det vara på sin plats att förtydliga att det faktiskt rör sig om en meny som kan fällas ut.

Tänk på att hamburger-ikonen ska vara placerad till höger för att texten ska visas korrekt.

Så här gör du

  1. Logga in i WordPress och gå till Divi > Tema-anpassare > Extra CSS
  2. Klistra in följande CSS-kod:
/* Text bredvid hamburgaren Theme Builder */

.et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 40px;
}

/* Text bredvid hamburgaren Divi 3 */

#et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
}

3. Du kan ändra MENU till valfri text, t.ex. MENY, direkt i koden ovan.

4. Öka eller minska värdet i right:40px för att öka eller minska avståndet mellan MENU-texten och hamburgerikonen.

5. Spara.

Resultatet:

Efter: Divis meny för mobil

Tips! MENU-texten kan överlappa sök-ikonen om du använder Divi 3-menyn. Dölj sök-ikonen i Divi > Tema-anpassare > Sidhuvud & Navigation om problemet uppstår.

2. Ändra stäng-ikonen till ett kryss

Att hamburgaren, med sina tre streck, förvandlas till ett kryss när man har öppnat mobilmenyn är standard i de flesta WordPress-teman och appar, men – konstigt nog – inte i Divi. Som tur är krävs det bara två rader CSS för att fixa till detta.

Så här gör du

  1. Logga in i WordPress och gå till Divi > Tema-anpassare > Extra CSS
  2. Klistra in följande CSS-kod:
/* X-ikon i öppen mobilmeny */

.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

3. Om du vill ändra färg på kryss-ikonen kan du lägga till t.ex. color:#000; innan den avslutande }-taggen.

4. Spara.

Resultatet:

Efter: Divis meny för mobil

3. Ta bort strecket i toppen

Den blåa linjen högst upp i mobilmenyn är lite av ett signum för Divi. Men om du inte vill att din meny ska se ut som alla andras kan du ta bort strecket.

Så här gör du i Divi 3

  1. Logga in i WordPress och gå till Divi > Tema-anpassare > Extra CSS
  2. Klistra in följande CSS-kod:
/* Ta bort linjen i mobilmenyn */

.et_mobile_menu {
border-top:0px;
}

2. Spara.

Så här gör du i Divi 4

Koden ovan fungerar även om du använder Theme Builder i Divi 4. Men till skillnad från den gamla menyn så kan du istället ta bort linjen utan att knacka CSS. 

  1. Öppna Theme Builder
  2. Redigera din header-layout
  3. Öppna meny-modulen
  4. Gå till fliken Design > Länkar i rullgardinsmeny och ändra Linjefärg på rullgardinsmeny till rgba(0,0,0,0)
  5. Spara och publicera

Detta innebär att linjen blir genomskinlig och därmed osynlig.

 

Resultatet:

Efter: Divis meny för mobil

Linjen har en förmåga att överlappa mobilmenyn när du använder Theme Builder. Det slipper du om du använder det här tipset.

4. Centrera texten i mobilmenyn

Korta texter i mobila enheter ser ofta bättre ut när de är centrerade och mobilmenyer är inget undantag. Det går inte att centrera texten i Divis mobilmeny via Divi Builder eller Tema-anpassaren men ett par rader CSS löser problemet – både i Divi 3 och Divi 4.

Så här gör du

  1. Logga in i WordPress och gå till Divi > Tema-anpassare > Extra CSS
  2. Klistra in följande CSS-kod:
/* Centrera menylänkar */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

2. Spara.

 

Resultatet:

Efter: Divis meny för mobil

5. Ändra mobilmenyn till fullbredd

Detta är en ändring som jag rekommenderar alla att göra: Låt mobilmenyn ta för sig av hela skärmens bredd istället för att hänga ner som en remsa. Det funkar utmärkt oavsett hur du har skapat din mobilmeny.

Så här gör du

  1. Logga in i WordPress och gå till Divi > Tema-anpassare > Extra CSS
  2. Klistra in följande CSS-kod:
/* Fullbredd mobilmeny */

.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

2. Spara.

Resultatet:

Efter: Divis meny för mobil

6. Låt mobilmenyn fylla ut hela höjden 

När du har låtit mobilmenyn breda ut sig på bredden är nästa steg logiskt: Att låta mobilmenyn fylla ut hela mobilskärmens höjd. Vi passar även på att lägga in lite luft (50px) i toppen.

Så här gör du

  1. Logga in i WordPress och gå till Divi > Tema-anpassare > Extra CSS
  2. Klistra in följande CSS-kod:
/* Full höjd mobilmeny */

.et_mobile_menu {
min-height:100vh;
padding-top:50px !important;
}

2. Spara. 

Resultatet:

Efter: Divis meny för mobil

Vi använder min-height och inte det absoluta måttet height för att innehåll som tar upp mer än 100% av skärmens höjd inte ska falla utanför menyn.

All CSS-kod på ett ställe

Här finns alla sex kod-snuttar samlade.

Så här gör du

  1. Logga in i WordPress och gå till Divi > Tema-anpassare > Extra CSS
  2. Klistra in följande CSS-kod:
/* Text bredvid hamburgaren Theme Builder */
.et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 40px;
}

/* Text bredvid hamburgaren Divi 3 */
#et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
}

/* X-ikon i öppen mobilmeny */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

/* Ta bort linjen i mobilmenyn */
.et_mobile_menu {
border-top:0px;
}

/* Centrera menylänkar */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

/* Fullbredd mobilmeny */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Full höjd mobilmeny */
.et_mobile_menu {
min-height:100vh;
padding-top:50px !important;
}

2. Spara.
 

Resultatet:

Efter: Divis meny för mobil

Visste du att mobil internettrafik gick om internettrafik från datorer redan 2016?

Fler tips för en bättre mobilmeny

Två bra artiklar från Elegant Themes blogg som tar din mobilmeny till nästa nivå. Tänk dock på att testa ordentligt om du kombinerar dem med tipsen i den här artikeln då vissa av dem kan krocka med varandra.

Gratis Divi-plugin med 20 extra mobilmenystilar

Skapa en nestlad mobilmeny med utfällbara länkar

 

Relaterade inlägg

2 Kommentarer
  1. Lyckas inte med detta steget ”Importera filen diviguiden-menylayout.json i Header-fältet i Divi > Theme Builder.”

    Svara
    • Hej Jack! Gå till Divi > Theme Builder. Klicka sedan på ”Add global header”. Välj Build Global Header och klicka sedan på Build from scratch”. Efter det klickar du på den lila bollen längst ner i mitten och sedan ikonen till höger med två pilar i motsatt riktning. Klicka sedan på ”Import” och leta upp .json-filen (inte zip-filen) på din hårddisk och ladda upp den. Här finns mer utförliga instruktioner: https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-theme-builder-portability-import-export-features

      Om du får ett felmeddelande kan det bero på att webbhotellet har tilldelat för snåla resurser. Kolla med deras support om de kan bumpa upp värdena i så fall.

      Ett dagsfärskt tips: Om du har uppdaterat till en nyare version än Divi 4.4.5 så har jag precis gjort en korrigering i koden när det gäller att visa ”MENU” bredvid hamburgaren. Divi har ändrat lite i koden för meny-modulen så right:40px passar bättre än right:33px om du använder Theme Buildern. Om man kör menyn via Tema-anpassaren så funkar right:33px fortfarande bra.

      Svara

Skicka en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.