category menu – can I move it to the right side?

hello, I need to make the category menu on WoodMart to look like the RTL version although we use LTR languages, i.e. be located on the right but open to the left.
Current situation(see the attached blue theme screenshot) was able to move the menu to the right but it opens off screen.

Desired situation: open to the left(see the green theme screenshot) . Is there an easy way to do that?

Thank you for your time.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and contacting the support.

Please provide your site admin access I will generate custom CSS for that.

Best Regards

Thank you. Credentials in private content.

Hello,

Please add this CSS to Theme Settings > Custom CSS:

.whb-header-bottom .container .whb-flex-row{
        flex-direction: row-reverse;
}

Best Reagards

Sorry to bother you again, Elise ,

that css changes the location of the categories to the left(see the blue template screenshot). I am not looking for that.

for every li in the category list I need the arrow to be to the left. and open submenu to the left also. Like it happens on the RTL version of the category ul. I might be wrong but the icon will need to change too, so there might be more to it than just a flex-direction.

Is this clear enough? I’ll reattach the desired effect: the green template.

Thank you for your time.

Attachments:

You must be logged in to view attached files.

Hello,

You need to configure your WordPress site for RTL and upload base RTL in Woodmart > http://prntscr.com/jai6dy

Best Regards

I am sorry, but all the languages I will use will be LTR. I cannot change wordpress to RTL.

Is there another way? Again, I am only after moving the category menu to the right side. that is all.

Hello,

The issue has been fixed. Please check Theme Settings > Custom CSS to see what CSS has been added.

Best Regards

Excellent work. Thank you very much for your time and effort. I know for a fact that this would be considered out of scope for most support teams.

I will paste the solution here in case others need it (feel free to censor me if you feel it is a breach of confidence):
.woodmart-navigation .item-level-0>a {
flex-direction: row-reverse;
}
.vertical-navigation .item-level-0.menu-item-has-children>a:after {
content: “\f053 “;
left: 20px;
}
.vertical-navigation .sub-menu-dropdown {
left: auto;
right: 100%;
}
.vertical-navigation .sub-menu-dropdown {
-webkit-transform: translateX(15px) translateZ(0);
transform: translateX(15px) translateZ(0);
}

Hello,

Thanks for publishing. It is ok. this piece of code is not confidential.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts