Ubermenu Submenu Margin

[eknudhol]

Hello –

I have added a mega menu but having an issue creating the margin (or gap) between the bottom of the menu bar and the top of the mega menu (submenu). As I am trying to show below, I have a menu bar embedded in a HEADER using a Nav bar which seems to work just fine. The issue is that when I hover over the mega menu option, the position of the top of the dropdown overlaps the menu bar:

Current:

At this point I feel I have tried all the options for setting the margins, but have not been able to move the submenu from overlapping the top menu items. Is there way to create the margin (Gap) between the menu bar (megamenu top line items and the top of the submenu?

Goal:

Thanks for you help.

[ruenel]

Hello @eknudhol,

Thanks for writing in! To get your issue resolved, please go to Appearance > Ubermenu > Main UberMenu Configuration > Style Customizations and then set the Top Level Line Height, Top Level Item Margin, Top Level Vertical Padding, etc.

You can also check out these documentation articles:

• https://sevenspark.com/docs/ubermenu-3/settings/submenu
• https://sevenspark.com/docs/ubermenu-3/layouts/submenu
• https://sevenspark.com/docs/ubermenu-3/customize

Best Regards.

[eknudhol]

Thanks for your reply. I have made the adjustments you mentioned, but they do exactly what the name implies, they adjust the “top level”. the issue I have is the top level is just fine and when I make these adjustment, the “top level”

shifts up or down, similar to

but the gap to the top of the submenu below stays the same or is made worse because it now completely overlaps the top line menu items.

I will revisit these to see if I missed something, possibly combining the offsets will accomplish this.

again, thanks.
Ed

[ruenel]

Hello Ed,

Please provide us access to your site so we can check your Ubermenu settings, and other settings as well. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[eknudhol]

So after inspecting the generated styles, it appears that modifying the following will position the submenu in a much better alignment and uncovers the top line menu bar. Now if you can tell me which menu parameter will accomplish the same effect, I would much rather do that than have custom CSS potentially impact me somewhere down the line.

I placed this in Appearance > Ubermenu > Custom CSS Tweaks:

.ubermenu.ubermenu-main.ubermenu-horizontal .ubermenu-item-level-0.ubermenu-active > .ubermenu-submenu-drop, .ubermenu.ubermenu-main.ubermenu-horizontal:not(.ubermenu-transition-shift) .ubermenu-item-level-0 > .ubermenu-submenu-drop {margin-top: 20px;
}

Not my first choice, but this seems to work, after initial testing anyway.

Let me know if there is a simpler configuration option.

thanks Ed

[marc_a]

Hey Ed,

To achieve your layout, you need to use custom CSS and we’re glad that you’re able to figure it out.

Cheers!