Hi,
I have an issue with the mega menu. While the position of the megamenu is correct on the first couple of menu items is correct, it breaks of the last menu items.
How its supposed to look:
Broken menu item:
Any ideas on how to fix that?
Hey cambium.digital,
I believe that this is because you are using custom css to make your menu item display flex with space-between with a custom gap. This changes the placement of your menu items but the mega menu placement is done by javascript and not css so they are not correct.
You could try this css for the last two mega menu items:
@media only screen and (min-width: 768px) {
#menu-item-28288 > .avia_mega_div.avia_mega2.six.units {
left: -263% !important;
}
#menu-item-28289 > .avia_mega_div.avia_mega1.three.units {
left: -288% !important;
}
}
and adjust to suit for different screen sizes.
Best regards,
Mike
Hi Mike,
thanks. Any suggestion to get a more dynamic solution while keeping the menu in the current layout?
Best regards
Hi,
Unfortunately not since you are using custom css to change the layout.
If you find a specific screen size that is not working well then create a copy of the css above and adjust to the new size with the issue, you might need to do this a couple of times if you want the menu to be exact in certain sizes. But when I check it seems to look fine.
Best regards,
Mike