Ubermenu - Less Padding For Specific Sub-Menus

Support
#1

Hi,

I am using an Ubermenu and have padding set for menu items. However, there are some submenu sub-items I want to have much less padding (5px netween vertical items, leaving side padding the same) - whilst leaving all other submenus as per main settings (Flyout sub-menus).

I cannot quite get the right CSS to do what I want. Only specific sub-menus need the reduced padding, but all are megamenus. In the case of this example, everything sub -

  • Animals & Birds > Animals
  • Animals & Birds > Birds

and the same under the “Home & Gift Menu”

Can you help?

Thanks,
Christopher

#2

Hi Christopher,

Thank you for writing in, but I cant get pass the site authentication, the login you provided seems not working please check.

Also, please provide us some screenshot showing the issue so we can have a better understanding on it.

Cheers!

#3

My apologies - the directory security failed to set correctly. All working as in the original Secure Note.

Attached is a screenshot - I want the spacing between sub-menu items to be reduced to 5px top and bottom, but only for the Animals & Birds and the Home & Gift submenus. All other submenus should keep the main Ubermenu settings.

I hope this helps you understand what I am trying to achieve.

Thanks,
Christopher

#4

Hello Christopher,

To resolve your issue, please go to Appearance > UberMenu > Main UberMenu Configuration > Style Customizations and make sure to reduce the “Submenu Item Padding”.

\We would love to know if this has worked for you. Thank you.

#5

Hi RueNel,

The setting you show in your screenshot is what I want for all menus, except the two submenus I previously mentioned.

Surely there is a way over overriding the settings for individual submenus?

Thanks,
Christopher

#6

Hello Christopher,

To override the submenu, you will need to get the parent menu item ID and use this custom css:

.ubermenu-main #menu-item-628 .ubermenu-submenu.ubermenu-submenu-type-stack > .ubermenu-item-normal > .ubermenu-target,
.ubermenu-main #menu-item-622 .ubermenu-submenu.ubermenu-submenu-type-stack > .ubermenu-item-normal > .ubermenu-target {
    padding-top: 5px;
    padding-bottom: 5px;
}

To know how I got the menu item ID, please right click on the page on your site and select “inspect element” and scroll down until you find code like this.

Or you can also go to Appearance > Menus and hover your mouse pointer over the Remove or Cancel link for each menu item.

Hope this helps. Please let us know how it goes.

#7

Hi RueNel,

Genius! That is exactly what I was looking for. Very grateful.

Many thanks,
Christopher

#8

You’re welcome!
It’s good to know that it has worked for you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.