Move Ubermenu submenu down

[xbsmarketing]

Hello,

I’m re-working my header (Pro) and have implemented Ubermenu as my navigation and am need in some guidance.

I need to have the vertical dividers in between the top level menu items, but they can’t exceed the dimensions of the text. By removing the vertical padding for the top level menu items, I’ve achieved the look needed as shown below:

However, without that padding, the sub menus sit directly underneath the baseline of the text, as seen below:

The green indicates where the sub menu is sitting. If possible, I’d like to bump it down so it doesn’t overlap that button in the menu.

My question:

1. Is there a way to bump the Ubermenu sub menu position down a bit? I can’t quite seem to find it in their settings and any class I seem to adjust messes up the look of the menus.

2. Is there a way to shorten the vertical divider (I believe it’s just a CSS border on the menu items) so I can add the vertical padding back in?

Any help is greatly appreciated.

Thanks!

[albrecht]

Hi @comdoc-marketing,

Thanks for writing in.

1. You can bump the Ubermenu submenu down by giving the submenu a margin-top. Try adding this css.

.ubermenu .ubermenu-submenu {
    margin-top: 20px !important;
}

2. Yes there is a way to shorten those vertical divider. Try this code.

.ubermenu-nav .ubermenu-item > a.ubermenu-target::after {
    content: '';
    height: 10px;
    width: 1px;
    position: absolute;
    top: 42%;
    bottom: 0;
    right: 0;
    background: #000;
}

If the css doesn’t work please share to us a link to your site so that we can take a deeper look and provide more accurate css.

Thanks.

[xbsmarketing]

@albrechtx, thank you so much for the fast reply!

I ended up modifying the second option a bit to fit my needs. I could’t quite find the right classes for that, your code worked perfectly!

One thing I didn’t consider about the first option is by moving the menu down, the emptiness between the top level items and the sub menu created a “dead space” that would actually hide the sub menu went the cursor entered it, which ended up making a not so great UX.

Thank you again, have a great day!

[christian]

You’re welcome. Glad we’re able to help.