Force dropdown in mobile menu to stay open

How To
1

Hi,

I have been trying to build a header using the nestable nav element with a dropdown inside. It works well on desktop, but it glitches when I view it via the mobile menu.

I want to force the dropdown to stay open on mobile since I don’t need the dropdown functionality. I have almost suceeded using custom CSS, adding display: flex and position: static to the dropdown content, but it still briefly disappears when I open the mobile menu. It’s just a quick glitch before it appears again, but it is quite noticeable.

When I looked closer in inspect mode I noticed a .brx-submenu-positioned class is added to the .brx-dropdown-content element. This class is removed when I open the menu and then added back in almost instantly. I suspect this relates to the glitch, but I don’t know how to eradicate it.

Any help is greatly appreciated.

2

I have been able to solve this in the meantime via Javascript using the following code:

<script>

// MOBILE MENU DROPDOWN FIX

document.addEventListener('DOMContentLoaded', () => {
  const mq = window.matchMedia('(max-width: 1023px)');
  const menu = document.querySelector('.brxe-nav-nested');
  if (!menu) return;

  const fixSubmenus = () => {
    if (!mq.matches) return;

    menu.querySelectorAll('.brx-dropdown-content').forEach(el => {
      el.style.setProperty('display', 'flex', 'important');
    });
  };

  const observer = new MutationObserver(() => {
    requestAnimationFrame(fixSubmenus);
  });

  const enable = () => {
    fixSubmenus();
    observer.observe(menu, {
      attributes: true,
      subtree: true,
      attributeFilter: ['class', 'style']
    });
  };

  const disable = () => {
    observer.disconnect();
    menu.querySelectorAll('.brx-dropdown-content').forEach(el => {
      el.style.removeProperty('display');
    });
  };

  // Initial state
  mq.matches ? enable() : disable();

  // Respond to resize / orientation change
  mq.addEventListener('change', e => {
    e.matches ? enable() : disable();
  });
});

</script>

When the .brx-submenu-positioned class (as mentioned above) was absent, the display property of the dropdown content would always get overridden to “none”. I tried editing the child theme stylesheet and lots of other stuff, but it was this Javascript that finally worked.

However, it feels like a more temporary solution. Is there perhaps a more elegant way of removing the glitch? Something I am missing?