How can I make the mobile sub-menus expanded by default?

Hello,
ik use free Astra and free Elementor.
This code does’t work at all:

button.ast-menu-toggle {
width: 100% !important;
padding-left: 90% !important;
border: 0 !important;
color: #000 !important;
}

This one does but now it won’t be able to toggle/hide the sub-menus on the arrow click. If you want to hide the arrow icon altogether:
@dbazhinov writes…
If you want to hide the arrow icon altogether:

.ast-menu-toggle {
display:none!important;
}

but I would like to keep the arrow en be able to hide/show the submenus….

HELP

Hi @grafischestudio,

We’re sorry, but Astra still doesn’t have the option to do that, expand the menu by default.

Personally, I think it’s uncommon to have a Hamburger menu open by default. The Hamburger menu is created for some reason, and I think one of them is to “hide” the menu items.

Anyway, let see if there’s someone in the community who comes with a custom code for this.

Kind regards,
Herman ??

I wrote a simple jQuery solution for this. Here you go. You’ll need to know how to edit your theme files to add this code or no doubt there is probably a plugin that allows you to input custom jQuery like this.

$(".ast-mobile-menu-buttons .ast-button-wrap .main-header-menu-toggle").click(function() {
  $(".menu-item .sub-menu").css('display', 'block');
  $(".menu-item").addClass('ast-submenu-expanded');
});

Thanks for sharing this @warwickmusic1. I believe a plugin like Code Snippet could help.

Kind regards,
Herman ??