Ihopfälld mobil meny i Divi

Hur man får ihopfälld mobil meny i Divi

Har du lagt ner massor av tid på att bygga upp en webbplats i Divi och har en riktigt full meny för att det ska vara enkelt för dina besökare att klicka sig fram? Först och främst – bra jobbat! Men har du kommit ihåg att kolla hur sidan ser ut i mobil vy?

Jag själv använder mig av Google Chrome som webbläsare. När du är på framsidan – frontend – av din webbplats kan du högerklicka och välja Inspektera: I rutan högst upp på skärmen kan du sedan välja vilken mobil enhet du vill använda som skärmstorlek: På så vis aktiverar du din webbplats responsiva läge och du ser hur det ser ut i en mobil enhet. Visst, Divi har ju mobil förhandsgranskning – men det är faktiskt inte alltid den är 100% korrekt! Men, det här handlade inte om Google Chrome utan om hur man gör om den mobil menyn i Divi, som just nu ser ut såhär: Bilden kommer från vår en av mina gamla sidor. Skärmen räcker helt enkelt inte till för att visa hela menyn. Det vi är ute efter är följande: Börja med att logga in på ditt administratörskonto – backend – och gå till Divi > Temainställningar > Integration:

Se till att ”Aktivera sidhuvudskod” faktiskt är aktiverat och lägg in följande snutt med JavaScript:

<!-- Ihopfällbar mobil meny i Divi -->
<script type="text/javascript">
(function($) { 
    function setup_collapsible_submenus() {
        // mobile menu
        $('#mobile_menu .menu-item-has-children > a').after('<span class="menu-closed"></span>');
        $('#mobile_menu .menu-item-has-children > a').each(function() {
            $(this).next().next('.sub-menu').toggleClass('hide',1000);
        });
        $('#mobile_menu .menu-item-has-children > a + span').on('click', function(event) {
            event.preventDefault();
            $(this).toggleClass('menu-open');
            $(this).next('.sub-menu').toggleClass('hide',1000);
        });
    }
       
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
  
})(jQuery);
</script>

Klicka sedan på knappen ”Spara ändringar” och gå till fliken ”Allmänt”, eller lägg in denna kod i ditt barntemas style.css:

/* Ihopfällbar mobil meny i Divi */
/* Detta döljer undermenyer på mobila enheter */ 
#main-header .et_mobile_menu li ul.hide {
display: none !important;
}

/* Detta justerar position och bakgrundens transparens av överliggande menylänk */ 
#mobile_menu .menu-item-has-children {
position: relative;
}
#mobile_menu .menu-item-has-children > a {
background: transparent;
}

/* Detta ger utseende på ikonen och flyttar den till höger */ 
#mobile_menu .menu-item-has-children > a + span {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
z-index: 3;
}
 
/* Här kan de faktiska ikonerna bytas ut */
span.menu-closed:before {
content: "\4c";
display: block;
color: #000000; //Här anger du färgen på ikonen
font-size: 16px;
font-family: ETmodules;
}
 
span.menu-closed.menu-open:before {
content: "\4d";
}

Färdigt!

Elegant Themes har också ett eget inlägg om detta på sin blogg. Detta är långt mycket utförligare än det jag skrivit ovan men bygger också på att designen som de visar. Ändå värt att kolla in!