This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 17 replies, has 2 voices.

Last updated by Noman 9 months, 2 weeks ago.

Assigned support staff: Noman.

Author Posts
January 8, 2019 at 4:48 am #3065450

ibrahimB

I am trying to: after translating the Arabic menu it does not act like the English menu

Link to a page where the issue can be seen:hidden link

I expected to see: the same alignment of English menu & submenus

Instead, I got: you have to check it online to see what i mean

January 8, 2019 at 7:34 am #3065624

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. You can fix this issue by adding following CSS in your theme’s or child theme style.css file OR Custom CSS section of the theme:

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.sub-menu {
    background: rgba(47,48,48, 0.9);
    border: 1px solid #5b5d5a;
    border-radius: 5px !important;
    left: -1px !important;
    top: 18px;
}

.navbar-nav > li > .sub-menu {
    margin-left: 8px !important;
}

.sub-menu .sub-menu {
	left: 99% !important;
}

And it will look as in attached screenshot. Could you please check and confirm?

Thank you

January 8, 2019 at 8:18 am #3065795

ibrahimB

thank you for supporting me, if you check now the arabic alignment is good but the english submenu opening far away from the main menu.

also, can we do the Arabic submenu to open to the left, now opening as English menu and must be opposite

January 8, 2019 at 9:16 am #3065941

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Please try with updated CSS and let me know how it goes?

:lang(ar) .sub-menu {
    position: absolute;
    top: 100%;
    left: auto;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

:lang(ar) .sub-menu {
    background: rgba(47,48,48, 0.9);
    border: 1px solid #5b5d5a;
    border-radius: 5px !important;
    right: -1px !important;
    top: 18px;
}

:lang(ar) .navbar-nav > li > .sub-menu {
    margin-left: 8px !important;
}

:lang(ar) .sub-menu .sub-menu {
	right: 99% !important;
}

Thank you

January 8, 2019 at 9:33 am #3066014

ibrahimB

Great job,

but can we change the small white arrows for the submenu to be on left also? i mean the sub menus to be RTL

appreciate your cooperation.

January 8, 2019 at 9:56 am #3066060

ibrahimB

this code affects the sidebar problem that i create a separate ticket for it.

you can check :

hidden link

January 8, 2019 at 2:23 pm #3067408

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Please use updated CSS and it will resolve both issues:

:lang(ar) .header_main .sub-menu {
    position: absolute;
    top: 100%;
    left: auto;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

:lang(ar) .header_main .sub-menu {
    background: rgba(47,48,48, 0.9);
    border: 1px solid #5b5d5a;
    border-radius: 5px !important;
    right: -1px !important;
    top: 18px;
	text-align:right !important;
}

:lang(ar) .header_main .navbar-nav > li > .sub-menu {
    margin-left: 8px !important;
}

:lang(ar) .header_main .sub-menu .sub-menu {
	right: 99% !important;
}

:lang(ar) .header_main .navbar-nav:not(.sm-collapsible) ul .caret {
    position: absolute;
    right: auto;
    margin-top: 6px;
    margin-right: 15px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px dashed;
	border-left: 4px solid transparent !important;
    left: 0;
}

Thank you

January 8, 2019 at 2:33 pm #3067462

ibrahimB

the code solves some issue, but please check the link and try to navigate the menu its seems hard to catch some item.

hidden link

and i hope to solve and be like the English version for the same page

January 9, 2019 at 7:18 am #3069947

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

You can fix this issue by adding following CSS:

:lang(ar) .header_main .sub-menu {
    top: 16px !important;
}

And it will looks as in attached screenshot.

Thank you

January 9, 2019 at 8:33 am #3070241

ibrahimB

dear, i add the last code after th long code (its correct or not?)

after that nothing happen!!

January 9, 2019 at 8:41 am #3070248

ibrahimB

if you go throw English version, and check the sidebar menu you will see that you need to click on the arrow near the main section then sub-menu will expand, its not mouse over like the sidebar main section in Arabic

Check here:

hidden link

January 9, 2019 at 12:13 pm #3071431

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I can see on the other ticket that Sidebar Menu issue is fixed like you have mentioned just:
https://wpml.org/forums/topic/side-bar-menu/#post-3071204

Is the sidebar menu issue solved or you need further help for this particular issue?

Thanks

January 9, 2019 at 12:16 pm #3071433

ibrahimB

the ticket for Sidebar Menu issue was for translation.

now i mean on my last reply the view of the menu with mouse hover or by click, you can compare english sidebar with arabic sidebar as i mentioned before.

thanks

January 9, 2019 at 12:24 pm #3071474

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

okay thanks much for clarifying it. I wanted to just confirm, its a complicated issue probably happening due to JS of the theme, but I will see if I can find anything for this issue.

Thanks

January 9, 2019 at 12:47 pm #3071564

ibrahimB

appreciate your efforts, and i believe you will find the suitable solution for me 🙂

The topic ‘[Closed] Arabic menu it does not act like the English menu’ is closed to new replies.