[Resolved] How to have the submenu navigation toggled down on open?

Hi Stefan,

Can you try this CSS:

.main-navigation.toggled .main-nav ul ul.sub-menu {
        position: relative;
        top: 0;
        left: auto!important;
        right: auto!important;
        width: 100%;
        pointer-events: auto;
        height: auto;
        opacity: 1;
        display: block;
        visibility: visible;
}

Hi there,

you won’t be able to do it with CSS.
It would need some Javascript.

1. Create a new Hook Element ( in Appearance > Elements ).
2. In the hook text area add this script:

<script>
const clickme = document.querySelector('#menu-item-584 .dropdown-menu-toggle')
const elemHtml = document.querySelector('html')
const mutateOptions = {
  attributes: true
}

function callback(mutationList, observer) {
  mutationList.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      // handle class change
      if (mutation.target.className == 'mobile-menu-open') {
        clickme.click();
      }
    }
  })
}

const observer = new MutationObserver(callback)
observer.observe(elemHtml, mutateOptions)
</script>

3. Set the Hook to: wp_footer
4. Set the Display Rules > Location to Entire Site
5. Publish the hook.

Glad to hear that!

Glad to be of help!