[HelloParticipant]

Hi,
I like to centre the titles in Ubermenus submenus. At the moment, they look like they are centered left.

For example, under the top level menu, Women – then submenu – Dresses – the title looks aligned left. This is the same with the rest of the submenus under Women and Men on the shop front page.

Also if you look in the same Women and Men submenus and the second level submenus of Accessories and Clearance Men and Clearance Women – all of them are out of aligned and not in straight vertical columns in respect of the submenus above them.

How can these be aligned so they are in straight vertical columns?

I have attached a screenshot. Also can I adjust each column both individually AND globally to centre the titles?

Please could you take a look.

Thank you.

[HelloParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.ubermenu-submenu span.ubermenu-target-title.ubermenu-target-text {
    text-align: center !IMPORTANT;
    width: 100%;
}

Please remove this code:

.ubermenu-main .ubermenu-item-layout-image_right > .ubermenu-target-text { padding-right:110px; }

Hope that helps.

[HelloParticipant]

Hi,
Where is this code?

.ubermenu-main .ubermenu-item-layout-image_right > .ubermenu-target-text { padding-right:110px; }

I don’t see it in Customize -> Custom -> Global CSS.

Do I have to remove the code first before adding this code?

.ubermenu-submenu span.ubermenu-target-title.ubermenu-target-text {
text-align: center !IMPORTANT;
width: 100%;
}

Thank you.

[ThaiModerator]

Hi There,

You don’t have to remove that CSS code.

Please add this CSS:

.ubermenu-submenu span.ubermenu-target-title.ubermenu-target-text {
    text-align: center !IMPORTANT;
    width: 100%;
}
.ubermenu-main .ubermenu-item-layout-image_right > .ubermenu-target-text { padding-right: 0; }

Hope it helps 🙂

[HelloParticipant]

Hi,
Great thank you! But in Women and in the second row, the submenus of Designers, Accessories and Clearance Womens are not centred like submenus above them.

To clarify, they are not centred AND not in straight vertical columns underneath the submenus above them.

The same goes for Men and in the second row – Clearance Men is not centred. It must also be in a straight vertical column under Coats and Jackets.

How can these be centred and aligned so they are in straight vertical columns?

Also in Men – I plan to add an image of 175px x 175px (the same as the other submenu image dimensions) to the submenu – Accessories. I presume it will be wrapped to the second row.

How can I ensure that when the image is added, the title will be centred and the submenu will be in a vertical column under Coats and Jackets submenu?

When fixed with the appropriate code, will the centering and vertical column settings apply to all future submenu additions?

Thank you.

[RadModerator]

Hi there,

It’s because the width varies depending on screen size. In my view, it’s all okay since I have a bigger screen, but in your screenshot, it’s smaller. If we will optimize it for the specific device, there is a chance it will look different and messier in different device view. How about testing it first in multiple device then screen mockup of how it should look on each device?

Thanks!

[Author]

Posts