Mega Menu bug in header when using bottom padding in this header section

This topic has 5 replies, 2 voices, and was last updated 2 months, 3 weeks ago ago by Mathew

  • Avatar: Mathew
    Mathew
    Participant
    December 6, 2023 at 10:40

    In my example, I’m using the Mega Menu for one of the menu items (‘Brands’) in the Bottom header. Another item (‘Company Profile’) in this menu has a standard menu list.

    This Bottom header has a 10px bottom pad setting for graphical reasons (background file used for creating a shadow, otherwise not possible to have a shadow on the header).

    What happens is that the ‘folddown’ menu under ‘Brands’ is shifted down by the padding amount (10px in this case), creating a gap between the ‘Brands’ menu link and its fold down Mega Menu. This makes navigation very hard, as moving the cursor over this gap will close the Mega Menu if not crossed fast enough.

    For reference, the standard menu fold down under ‘Company Profile’ works as expected and is not shifted down by the padding: there’s no gap, and therefor navigation works as expected.

    In short: my request is for the Mega Menu to display itself at the same location as a standard menu folddown: directly under the menu link, ignoring any padding in order to avoid any gaps.

    Thanks!

    Please, contact administrator
    for this information.
    4 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 6, 2023 at 13:03

    Hello, Mathew,

    Thank you for reaching out to us with your concern regarding the Mega Menu display on your website.

    To address the issue, kindly proceed by inserting the following code into your website: Theme Options > Them custom CSS > Desctop area:

    .header-main-menu .nav-sublist-dropdown:not(.nav-sublist) {
        top: 46px;
    }

    If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Kind Regards,
    8theme team

    Avatar: Mathew
    Mathew
    Participant
    December 6, 2023 at 13:32

    Thanks for the code, but sorry to say this is not the solution I was looking for:

    With the above code, the gap for the Mega Menu became smaller, but is still there and still causes annoying navigation with the menu disappearing if one doesn’t cross the gap fast enough with the mouse cursor.
    Please also note: the new small gap is now also present on the standard dropdown menu, now also causing annoying navigation there.

    The idea was to have no gap on the Mega Menu, so it behaves the same as the original standard dropdown menu which was ‘gapless’ and working perfect 🙂

    Hope this additional info helps to understand and find a more suitable solution, thanks!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 6, 2023 at 14:29

    Hello, Mathew,

    We appreciate your prompt response.

    We kindly request that you update the existing custom code to the following:

    .header-main-menu .nav-sublist-dropdown:not(.nav-sublist) {
        top: 44px;
    }

    Thank you for your cooperation and we look forward to hearing from you soon.

    Kind Regards,
    8theme team

    Avatar: Mathew
    Mathew
    Participant
    December 6, 2023 at 14:54

    I tried to tweak the number before actually, but got some strange results, might have been caching. Anyway, all good now, thanks!

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Mega Menu bug in header when using bottom padding in this header section’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.