Align sub-menu RTL

Hi Beit,

Please can you try this?

https://www.megamenu.com/documentation/rtl-support/

That should cover 1 and 2.

Thank you, it did cover both.
May I ask why this is something one must add into CSS manually and not an integral part of the plugin? There is, after all, a quarter of the world’s population, give or take, with RTL languages… I think it’s about time RTL support is considered self-evident, not an afterthought.
Thank you,
Vera

Hi Vera,

Great to hear that worked for you.

As a non RTL “reader”, it’s very difficult to understand if what we’re doing is actually correct (to me, it looks “wrong” as I am used to reading LTR), and I do not want to add functionality to the plugin that might be incorrect. The RTL documentation is there as we can easily adjust it based on feedback from RTL users. Once we are happy with it, it will be added as an option in the theme editor.

I understand, thank you.
In that case, some feedback:
I would suggest changing a bit the padding to the right of the sub-menu items, so that the hover effect wouldn’t begin right at the text, but a bit padded, but, perhaps, at the edge of the sub-menu container. You can see the result of your current CSS fix on my test site:
https://test.eichut.net/
(I understand it would look wrong to you, but it should only be a mirror image of the LTR variant, in general).
I would think that, as of today, there are heaps of RTL-speaking and -reading coders and helpers who may help with it. I may be wrong, of course.
I, for one, shall be happy to help, if you need someone to test how things look or should look.
Vera

Hi Vera,

Many thanks for your offer of help – much appreciated!

You can add padding to the sub menu items using these options in the theme editor:

https://screencast.com/t/7qfA3elgo

If you spot any other RTL issues please post them here and I will update the RTL documentation. Once I am more confident it is stable I will add it in as a simple checkbox option in the theme editor. When you spot that option in a future release you can enable it and remove the CSS from the custom styling area.

Thank you.
Well, I did do that.
I added left padding 10px for the second level items. It shows on the English pages. But it doesn’t translate to right padding 10px on the Hebrew page.
I can, of course, make the padding on both ends, and thus avoid the issue, but I wouldn’t like to add any more on the end of the item, there is ample space there.
Vera

Hi Vera,

I don’t think that setting should ‘translate’. Regardless of the reading direction, it is still left or right padding.

If adding the same padding to both left and right is not an option that you want to go for (the padding is applied ‘internally’, so it should work for both your LTR and RTL menus), you’d need to duplicate the theme so you have an RTL theme and a LTR theme, then apply each to each menu accordingly.

Perhaps I misunderstood you or vice versa.
When I said I expect it to translate I meant the followin:
I have a bilingual website. I use the menu in a header file.
The Mega Menu only has one setting. So I have to choose whether I want it to be LTR or RTL.
In my global setting, I made a LTR menu.
In my Hebrew heading, the page is RTL. So the RTL CSS should kick in.
This should mean that any padding setting for a LTR menu should automatically be mirrored in the RTL header.
So, if my English sub-menu items are set to be floating to the left and wrapped in padding on the left – then within RTL menu they must automatically be floated to the right (you did that) and padding on the right (not happening).
The left-right padding of a menu item, whether top level or second etc. should get mirrored on RTL just like the floating or text-align.
This is how RTL works in all settings, not just menu.
Vera

Hi Vera,

To mirror the left padding over to the right on your site, please go to Mega Menu > Menu Themes > Custom Styling and add the following:

.rtl #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  padding: 0 $panel_second_level_padding_left 0 0;
}

Yes, thank you, that has done it.
I understand that this is more apparent for a bilingual situation. However, it also goes in any RTL setting of any theme, for instance, if taken only for RTL.
In that case, perhaps, it would be better to have the admin panel option of choosing whether the site is RTL and have the whole admin panel swap, if so? Or even have the plugin taking the information from the site core setting, as RTL sites do specify that?
And in the case of a RTL site setting, if the site is also multilingual – then the swapping for LTR parts may be done conditionally.
Or, another option, if swapping of the admin panel is too complicated:
Instead of “Left” and “Right” in the admin panel, you might state sides of item (beginning or end of text). Then those would be set conditionally in CSS.
Vera

• This reply was modified 5 years, 7 months ago by beitsiach.

HI Vera,

Thanks, a lot of interesting suggestions there. I will also gauge opinion from some other RTL users to see that they think.

Of course, you should do that.
Thank you.
I meant what I said earlier, you may call on me if you need proofing or something. Glad to help.
Vera