Ubermenu Submenu Tweaks

Support
#1

Hi there,

The items that I’m referring to (from www.eurasianwhispers.com) are under the ‘regions’ option in the black menu, and from there in the ‘Central Asia’ tab.

  1. Would it be possible to get all of the font sizes the same. You can see that the words Kazakhstan, Kyrgyzstan, Uzbekistan, Turkmenistan are all smaller than the one for Tajikistan. Can I make it so that they are all the same size as the one for Tajikistan?

  2. I noticed that all of the images in a row are all horizontally aligned along the top of the images (which obviously means that the writing is not aligned if the images are different sizes). Would it be possible to have them all aligned along the bottom of the images instead?

  3. Can I also make all five of the images about 10% smaller? I have tried to do this within Ubermenu but it doesn’t seem to be working…

Thank you
Ew

#2

Hello There,

Thanks for writing in!

1.) To make the font size the same, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

span.ubermenu-target-title.ubermenu-target-text {
    font-size: 11px;
}

2.) You will need to resize your image. Please edit it using Photoshop and make sure that you have a uniform image dimension. The width and height of your images should be the same for example, 480 x 300 pixels. And then re upload the resized images and insert it in your submenu item.

3.) If you use a smaller like 220 x 120 pixels, then you can have a smaller images for your sub menu items.

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

#3

Hi Rue,

  1. Is this really not possible without reshaping the dimensions? The Kyrgyzstan image especially won’t really work if I need to change its dimensions. Is there really no way to align it along the bottom horizontal rather than the top horizontal?

Thanks
EW

#4

Hi EW,

That is the best way or you may try to use Custom Image size: http://sevenspark.com/docs/ubermenu-3/content/images, though this might disrupt normal image proportion.

Hope this helps.

#5

Hi Lely,

OK thank you.

Regarding 1) that changed the size of all of the text of the whole menu: the words on the black strip, the vertically aligned tab options, and the individual tab options, which is not what I wanted.

I only wanted something to make the words ‘Kazakhstan’, ‘Kyrgyzstan’, ‘Turkmenistan’, and ‘Uzbekistan’ the same size and boldness as the rest of the country words under their respective pictures. I think that the fact that they are columnised items must have changed the text formatting for some reason…

Thank you,
EW

#6

Hi there,

Please kindly add the code below to Pro > Launch > Theme Options > CSS:

#menu-item-728 .ubermenu-target-title.ubermenu-target-text {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
}

#menu-item-728 .ubermenu-image {
    height: 200px;
    object-fit: contain;
}

Please kindly consider that I restricted the code only for that Central Asia menu. I also made the image be in fixed height via CSS.

Hope it helps.

#7

Hi Christopher,

Thank you, that almost worked.

The only thing is that it changed the size of the text of ‘Central Asia’ so it’s too big now. And you can see that the words ‘Kazakhstan’, ‘Kyrgyzstan’, ‘Turkmenistan’, and ‘Uzbekistan’ are a slightly different font colour to that of Tajikistan and the rest of the country words. (I have left the setting on so you can see what I mean).

Would you please be able to help me fix this?

Thank you,
EW

#8

Hi there,

You may change their colors too like this (just update your CSS to this)

#menu-item-728 .ubermenu-target-title.ubermenu-target-text {
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
color; #777;
}

Thanks!

#9

Hi Rad,

Thank you, that worked great.

However, as you can see, the changes have also affected the words ‘Central Asia’ which is something I am trying to avoid.

Could you please tell me how I can exclude ‘Central Asia’ from these effects so that it looks the same as ‘The Baltic Countries’, ‘The Caucasus’, etc.?

Thank you,
EW

#10

Hi EW,

Let’s add another selector on the CSS .ubermenu-submenu. This will filter all text inside submenu and exclude Central Asia.

#menu-item-728 .ubermenu-submenu .ubermenu-target-title.ubermenu-target-text {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #777;
}

Hope this helps.

#11

Thank you, Lely, that worked perfectly.

EW

#12

Glad to hear it.