Right handed menu

Support
#1

Hi,

I made the english version of a site, used ubermenu and with some custom css i managed to get the menu how i like. But for the Kurdish version i need the menu to be the exact same but start from the right. Can you please help me style the Kurdish menu exactly like the English menu.

Thanks

#2

Hi there,

Thanks for posting in.

Please edit your custom CSS at Admin > Appearance > Ubermenu > General Settings > Custom CSS and change this CSS

/* Text RTL */
.rtl .ubermenu,
.rtl .ubermenu .ubermenu-item{
     text-align:right;
}

to this

/* Text RTL */
.rtl .ubermenu,
.rtl .ubermenu .ubermenu-item{
     text-align:right !important;
}

In fact, you may add !important to all your custom styling, because they seem to be overridden by another CSS from somewhere else.

That should do it, you may also change the image :slight_smile:

Thanks!

#3

Thanks a lot, that helped.

Also, in the Kurdish menu, the English selection is not appearing. In the English menu there is the option to choose Kurdish. I set all the settings according to that but it still is not showing up. Can you look at that?

Thanks

#4

Hi There,

The only difference on Appearance > Menu settings when I checked is Hides Language with no translation option. It is not active on English menu but active on Kurdish menu. Try disabling that on Kurdish menu and check again.

#5

How can change the padding on the menu? The Kurdish menu is not looking good. so I need to adjust the padding of the items but where can I adjust it only for the Kurdish menu?

#6

Hi again,

You can make use of the following code to adjust the padding for Kurdish menu only:

.rtl .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    padding-top: 0px;
    padding-bottom: 6px;
}

Hope this helps!

#7

Thanks, it helped.

Can I add a font for Kurdish? and can I set the font to use only in Kurdish site?

Thanks

#8

Hi there,

Sure, but what specific element should have the font? The theme is default font regardless of language, and if you wish to change it for specific language only then what it needs is custom CSS since the font options are global.

We can’t enforce the font globally using CSS too, it will greatly affect the icons that uses font instead of graphics image. Example, you can have it like this

.rtl h1, .rtl .h1, .rtl h2, .rtl .h2, .rtl h3, .rtl .h3, .rtl h4, .rtl .h4, .rtl h5, .rtl .h5, body.rtl {
font-family: 'Your Font Name Here' !important;
}

This only affects the header and body text, but there are elements that have local font styling, hence, you have to apply separate CSS for them.

Thanks!