Ubermenu vertical center text to image

I am trying to center the text to the image.
It is currently aligning to the top
I have tried the following code with no success

.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target {
text-align: center;
}

Ideas?
Screen Shot 2020-06-01 at 11.33.55 PM

Hi @XSO,

I tried to check and see which site you are talking about but none of the ones on your licenses page has a menu like the one you gave the screenshot.

We need to see it live on your browser to be able to check, just to ket you know this is a customization request and outside of our support scope. We will do our best to show you how to add CSS code but the implementation will be on your shoulders.

I also suggest that you check the document below:

And for the vertical alignment, you need to use the Flex layout I think. For more information:

Thank you.

I will try to do as you suggested.
In the meantime, I have provided the website and credentials in a secure note below

I was able to use this code:
.ubermenu .ubermenu-target-text
{
padding-top: 30px;
}

But it also applies to the top (main) menu items (not just the submenu items)

I do not want to use the code below for all of the submenu items:
i.e. because I would have to change .ubermenu-item-39 to 38, 37, 36, etc
.ubermenu .ubermenu-item-39 > .ubermenu-target.ubermenu-item-layout-image_left > .ubermenu-target-text
{
padding-top: 30px;
}

Help…?

Hello @XSO,

The given credentials is not working for us. The password is incorrect.

Meanwhile, please refrain from using custom CSS. Use the alignment settings as pointed out by @Christopher. You may also edit your menu, Appearance > Menus and then find the alignment settings as shown in the screenshot below:

Hover over the menu item:
I3UByyKUS7KWgeTMfUg9sQ

Set the alignment:

And then the Submenu Column Alignment:
9mXwurKvSRSpSf_L2NbfoQ

If you need anything else we can help you with, please let us know.

Password updated

@XSO,

Please remove the custom CSS. Edit the menu and as previously suggested, set the aligment using the Ubermenu settings:

If you happened to log in using the credentials, you will see that I have removed the custom CSS and set the alignment accordingly.
Does not work

Hi @XSO,

The alignment is meant for image, title, description. Since there is only an image and description, then it appears misaligned. It’s net, the other one is just empty. Hence, the only fix is again a custom CSS, please try adding this

    #menu-item-55 .ubermenu-submenu a img + span {
     line-height: 75px;   
    }

The 75px is the height of the image, and that CSS means center it equal to the height of 75px.

The provided CSS is just an idea of how it can be achieved, but we don’t maintain and provide future support to it. You’re free to edit and maintain it :slight_smile:

Thanks!

@rad

Thx
That worked :grin:

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

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