Problem with Megamenu – a gap of several pixels and scrolling
-
Dear Support Team,
I have a problem with my website. I am modifying the Megamenu according to my needs and I see two issues:
1. There is a gap (several pixels) between the main menu bar with the menu items in it and the Megamenu dropdown. Attached is a screenshot where I highlighted what I mean. This gap shows the page underneath the menu dropdown.
2. When I hover over the third menu item “Работни Ръкавици” there are three rows of different types of work gloves. How can I make the dropdown scrollable so that people can view the third row of gloves type? I tried to activate the “Enable scroll” option at the “Dropdown settings” section of the menu settings page. Attached is another two screenshots for your reference.
Best regards,
Angel
Attachments:
You must be
logged in to view attached files.
Hello,
01. Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
.whb-header-bottom .wd-dropdown {
margin-top: 0px !important;
}
02. The scroll option in the mega menu works, but it only becomes active when a fixed dropdown height is set: https://postimg.cc/BtYDh50G
Right now, your dropdown is expanding based on its full width, which is why the third row is not scrollable.
Edit the menu item “Работни Ръкавици” > Go to Dropdown Settings >Set Enable scroll Yes and set the drop down settings “ full height”.
Best Regards,
Hi Aizaz,
Thank you for your reply. The code you sent to me fixed the problem with the gap. I actually had to tweak it around and found out that I get the best result when I input a value of 8px for the margin-top.
As for the other problem I reported – I understand the solution you’re proposing, but I don’t think that would work for me – when I choose the “Full height” option, that’s how my menu looks (attached is a screenshot). I can try to set custom width but I don’t know how this will affect the experience of different users as they all will have a different screen resolution. Do you have any other suggestions for a solution to that problem? If not, I will probably rearrange the menu in a way that the gloves will spread along the full width of the website and keep them in two rows.
Best regards
Attachments:
You must be
logged in to view attached files.
Hello,
I understand your concern. Unfortunately, the scroll option in WoodMart’s mega menu only works when a fixed dropdown height is set. If you don’t want to limit the height with “Full height,” there isn’t a built-in way to make a variable-height dropdown scrollable automatically for all screen sizes.
The most reliable solutions would be either:
1. Rearrange the menu items so the gloves fit into two rows within the full-width dropdown, as you suggested.
2. Set a fixed dropdown height with scroll and adjust the width slightly to maintain readability on different screens.
Best Regards,
.
