Skip to content

Instantly share code, notes, and snippets.

@noellesteegs
Last active March 25, 2024 10:08
Show Gist options
  • Save noellesteegs/b08eda7451c2ffcf51172fac52793098 to your computer and use it in GitHub Desktop.
Save noellesteegs/b08eda7451c2ffcf51172fac52793098 to your computer and use it in GitHub Desktop.
Add toggles to Divi's mobile menu
@media (max-width: 980px) {
.et_mobile_menu {
overflow: hidden;
}
.et_mobile_menu li.menu-item-has-children {
position: relative;
}
.et_mobile_menu li.menu-item a {
background-color: #fff;
font-weight: 400;
border: none;
}
.et_mobile_menu .sub-menu-toggle {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: right;
padding: 0.5em;
}
.et_mobile_menu .sub-menu-toggle::before {
content: "";
display: block;
color: #666;
font-size: 1.25em;
font-family: ETmodules; /* Makes sure we're using Divi's icon set */
}
.et_mobile_menu .sub-menu-toggle:not(.popped)::before {
content: "3"; /* Down arrow */
}
.et_mobile_menu .sub-menu-toggle.popped::before {
content: "2"; /* Up arrow */
}
.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu,
.et-db #et-boc .et_pb_menu .et_mobile_menu li .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
}
.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-20vw);
transform: translateX(-20vw);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-20vw);
transform: translateX(-20vw);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
}
(function($) {
function setup_collapsible_submenus() {
var $menuItems = $("#mobile_menu1.et_mobile_menu .menu-item-has-children > a"); /* Replace the ID with yours */
var $subMenuToggle = $("<div class='sub-menu-toggle'></div>").insertBefore($menuItems);
$subMenuToggle.off('click').click(function (event) {
event.stopPropagation(); /* Prevents Console errors around slice, likely to do with Divi wanting to close the menu on click, which we are preventing here */
$(this).toggleClass("popped");
});
}
$(window).on('load', setup_collapsible_submenus);
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment