https://kriesi.at/support/topic/relates-to-https-kriesi-at-support-topic-duplica

Hi,
Thank you for your patience, it seems that the issue is the flex css we used to change the position of the menu items equally across the header, the position of the mega-menu sub-menu is determined by javascript based on the screen width and the calculation was for before the css moves the item. I didn’t find a way to adjust the precious css to correct or a way to correct with more css because the value is dynamic.
I was able to correct with the following javascript and I added it to your child theme functions.php

function adjust_mega_menu_submenu_for_aboutus_item_to_be_on_screen() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
  const menuItem = document.querySelector('#menu-item-287');
  const subMenu = document.querySelector('#menu-item-287 .avia_mega3');

  function adjustSubMenuPosition() {
    const viewportWidth = window.innerWidth;
    const subMenuRect = subMenu.getBoundingClientRect();
    const offScreenRight = subMenuRect.right - viewportWidth;
    if (offScreenRight > 0) {
      subMenu.style.left = -${offScreenRight}px;
    } else {}
  }

  menuItem.addEventListener('mouseenter', function() {
    subMenu.style.display = 'block';
    adjustSubMenuPosition();
  });

  menuItem.addEventListener('touchstart', function() {
    subMenu.style.display = 'block';
    setTimeout(adjustSubMenuPosition, 200);
  });

  menuItem.addEventListener('mouseleave', function() {
    subMenu.style.display = 'none';
  });

  menuItem.addEventListener('touchend', function() {
    subMenu.style.display = 'none';
  });
});
</script>
  <?php
}
add_action('wp_footer', 'adjust_mega_menu_submenu_for_aboutus_item_to_be_on_screen', 99);

Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad that this helped, but the mega menu width is dynamically created based on the screen width, it’s width is not absolute and is not positioned based on the right edge, but the left edge.
I examined this for quite awhile but unfortunately I don’t have a solution for what you want to achieve, you could try adding another column to the sub-menu.

Best regards,
Mike

Hi,
Thanks for your patience, I disabled the script above and added a new mega menu column item call “new item” this makes the mega menu show correctly and the sub-menu items work when you click them, please try to use this new column in your mega menu, changing the name and link to something you can use.

Best regards,
Mike

Hi,
I disabled the flex-grow: 1; from this css solution:

.avia-menu>ul.av-main-nav li {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

and now the maga menu sub-menu seems to work correctly, at all sizes. Please clear your browser cache and check.

Best regards,
Mike

Hi,
I added this css:

.avia-menu>ul.av-main-nav li.menu-item-top-level:not(#menu-item-287) {
    flex-grow: 1;
}

this added the flex-grow to every item except the last one giving us the trouble, I don’t think that it is noticeable because it’s a longer text length and it’s at the end, but this solves the other two issues.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Unfortunately I don’t have a solution for that, there is no way that I can say there won’t be an issue if the nav menu configuration is changed in the future.
You would be better off not using the last snippet and allow the background color to be behind the text. Our menu is not designed for your customization and it seems like we are trying to recreate it from scratch.

Best regards,
Mike

Hi,
It looks like for level one & three the menu item gets the class current-menu-item
But not for level two, it gets the class active-parent-item
So try adding this css:

#top #header .av-main-nav > li.active-parent-item > a {
    background-color: #776fb1;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike