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

Kom igång

Ä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.

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 !important; innan den avslutande }-taggen. Byt ut #000 (svart) till önskad färg.

4. Spara.

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.

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.

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.

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 !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}

html {
height: -webkit-fill-available;
}

2. Spara.

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 !important;
padding-top:50px !important;
}

2. Spara.