Return to previous page

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

This topic has 5 replies, 2 voices, and was last updated 5 months ago ago by 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.

#375864 Copied Theme version: 9.2.5

4 Answers
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
#375887 Copied
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!

#375897 Copied
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
#375908 Copied
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!

#375912 Copied
Tagged: fix woocommerce mega menu, header padding issues, mega menu bug, woocommerce header bug, wordpress theme problems, wordpress woocommerce themes
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

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

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection