Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 11, 2024 at 4:10 pm #1439753
    cambium.digital

    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:
    Working mega menu item

    Broken menu item:
    Broken mega menu item

    Any ideas on how to fix that?

    April 13, 2024 at 4:06 pm #1439901
    Mike

    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

    April 17, 2024 at 11:55 am #1440186
    cambium.digital

    Hi Mike,

    thanks. Any suggestion to get a more dynamic solution while keeping the menu in the current layout?

    Best regards

    April 17, 2024 at 12:31 pm #1440192
    Mike

    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.