SOLVED: Megamenu breaks after update to Bricks 2.1.1

Bugs
1

After updating to 2.1.1 the “Nav nestable” menu dropdown breaks. The layout is supposed to be sitewide on the dropdown content. After updating it’s not sitewide anymore.

Staging page: https://ny-veniro.vmshost.no/

2

I have also noticed a bug with the mega menu after updating. You can no longer set the width of the mega menu with the ‘CSS selector (Horizontal)’ and adding a parent class to set the width.

CleanShot 2025-10-10 at 16.50.27
CleanShot 2025-10-10 at 16.50.271648×980 156 KB

CleanShot 2025-10-10 at 16.51.44
CleanShot 2025-10-10 at 16.51.441664×942 400 KB

3

Is this perhaps the width calculation bug that was just fixed in 2.1.2 released today?

1 Like
4

Hello,

Some of my installations are experiencing the same problem. The strange thing is that it works on some installations that are exactly the same (plugins, etc.)! Here is a script that temporarily fixes the problem until the developers have fixed the bug. Load the script in the footer under custom code in bricks. It’s not perfect, but it works.

<script>
(function () {
  var DROPDOWN = '.brxe-dropdown.brx-has-megamenu, .brx-dropdown.brx-has-megamenu';
  var CONTENT  = '.brx-dropdown-content.brx-submenu-positioned';
  var CONTAINERS = ['.brxe-container','.brx-container','.container','.site-container'];

  function getContainerBox() {
    for (var i=0;i<CONTAINERS.length;i++){
      var el = document.querySelector(CONTAINERS[i]);
      if (el) return el.getBoundingClientRect();
    }
    return null;
  }

  function sizeOne(dropdown) {
    var content = dropdown.querySelector(CONTENT);
    if (!content) return;

    var cs = getComputedStyle(content);
    if (cs.visibility === 'hidden' || cs.display === 'none' || +cs.opacity === 0) return;

    var ddRect = dropdown.getBoundingClientRect();
    var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

    var c = getContainerBox();
    if (c) {
      var w = Math.min(c.width, vw);
      content.style.minWidth = w + 'px';
      content.style.maxWidth = w + 'px';
      content.style.left = (c.left - ddRect.left) + 'px';
    } else {
      content.style.minWidth = vw + 'px';
      content.style.maxWidth = vw + 'px';
      content.style.left = (-ddRect.left) + 'px';
    }
    content.style.transform = 'none';
  }

  function sizeAll(){ document.querySelectorAll(DROPDOWN).forEach(sizeOne); }

  function onOpen(e){
    var dd = e.target.closest && e.target.closest(DROPDOWN);
    if (!dd) return;
    requestAnimationFrame(function(){ sizeOne(dd); });
  }

  function init(){
    document.addEventListener('pointerenter', onOpen, true);
    document.addEventListener('click', onOpen, true);
    document.addEventListener('focusin', onOpen, true);
    window.addEventListener('resize', function(){ requestAnimationFrame(sizeAll); }, {passive:true});

    var mo = new MutationObserver(function(){ sizeAll(); });
    mo.observe(document.body, {attributes:true, childList:true, subtree:true});

    sizeAll();
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>
5

We just released Bricks 2.1.2, which addresses the mega menu position & dimension calculation issue.

2 Likes
6

Thank you @thomas, that remedied my issue :slightly_smiling_face:

1 Like