Changing image size in Uber menu

[liz80y]

Hi,
I am wanting all my sub menus to be the same size (100 x 100) and have adjusted both the individual sizing of each submenu to Custom and 100 h x 100 w, as well as going into the main Uber menu configuration and changing those dimensions too.
I still have the three main sub menu categories (Start Here, Destinations, and Blog) all having slightly different sub menu image sizing. Can you tell me where i’m going wrong?

Thanks.

[rad]

Hi @liz80y,

Thanks for reaching out.

May I know what design you intended to implement? They are all 100 but you also have custom CSS that force them to different sizes, 75%, 83%, 72%, and so on

ul.ubermenu-submenu.ubermenu-submenu-id-927.ubermenu-submenu-type-auto.ubermenu-submenu-type-mega.ubermenu-submenu-drop.ubermenu-submenu-align-full_width img {
    width: 75%;
}

#menu-item-2891 img {
    width: 83%;
}

#menu-item-2891 img {
    width: 83%;
}

Plus, Ubermenu is responsive, it will display the image 100px but since it’s responsive, it will get smaller depending on the device. And this is the CSS for that depending on column counts.

.ubermenu .ubermenu-nav .ubermenu-column-1-7 {
    width: 14.28%;
}

You mean to fix it in 100px without responsiveness?

Thanks!

[liz80y]

Thanks Rad,
I don’t really mind what size the images are so long as all three categories are the same if possible. I was looking to make them the same size as the ‘Start Here’ category but am fine with whatever works best.

[ruenel]

You’re welcome!
We’re glad Rad were able to help you out.

[liz80y]

Hi RueNel,

Just waiting to see what was decided. In regards to Rad’s question, I would prefer the images to be responsive, so does this mean they need to stay at a different sizing? Do i go into the Custom CSS and change the % sizes to suit?

[ruenel]

Hello There,

You can have them in different responsive widths and then add a maximum width so that they will be in uniform maximum width. Perhaps, this would help:

ul.ubermenu-submenu.ubermenu-submenu-id-927.ubermenu-submenu-type-auto.ubermenu-submenu-type-mega.ubermenu-submenu-drop.ubermenu-submenu-align-full_width img {
    width: 75%;
}

#menu-item-2891 img {
    width: 83%;
}

.ubermenu .ubermenu-nav .ubermenu-column-1-7 {
    width: 14.28%;
    max-width: 100px;
}

Feel free to change the maximum width.

Hope this helps.

[liz80y]

Thanks so much.
I have added this CSS to my page and made sure all the widths i could find under the Ubermenu were all 75% but it doesn’t seem to have changed anything. If you look at the category called ‘Blog’ the images are still larger than the other two categories (Start here and Destinations), not sure what i’m doing wrong.

[christian]

Hey @liz80y,

I’d recommend not using CSS for this because UberMenu gives you the control to change individual image size. You just need to take into account your Submenu’s Layout (see secure note). If you use 5 columns as the submenu layout for the Start menu, you need to set the same layout for other submenus as well.

Thanks.

[liz80y]

Thank you so much Christian. I really appreciate your time figuring this out for me.

I love that I could follow your steps and get a better understanding of what to do,

All fixed!

[christian]

You’re welcome, @liz80y. Glad we could help.