Canvas Support

Menu Formatting for RTL

7 replies · opened Jan 26, 2022

HheijiJan 26, 2022

Hello,
Thank you for this project it is really very useful, congratulations!
My problem is in the menu when I change to RTL, it changes the ranking of entries but not the location, and that causes user experience problems especially if there are submenus.
There is another problem also with RTL but this time on the page
https://themes.semicolonweb.com/html/canvas/demo-shop.html
the login part and the basket icon. I solved this problem with the following css code:
#top-account{
border-right: 0 !important ;
padding: 3px 0 3px 3px !important ;
border-left: 1px solid #DDD;
}

thank you for solving this problem.

SSemicolon WebSTAFFJan 27, 2022

Hello,

Apologize for the Inconveniences caused and Thanks so much for reporting these issues to us!

We will fix this shortly and release an update soon to address these bugs, and will send you a Notification once this is available. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

HheijiJan 27, 2022

Thank you for your quick reply.
Alright I'll wait for the update and I hope it's as fast.
I have a suggestion, if possible to also add the fontawsome icons: https://fontawesome.com/v5.15/icons?d=gallery it will be really great.
Good for you and good continuation, you will do a good job

SSemicolon WebSTAFFJan 27, 2022

Hello,

Thanks for your Patience!

  1. Please find the following code in the js/functions.js File:
    [ch_pre type="js"]if(windowWidth - (menuChildWidth + menuChildOffset.left) < 0) {
    $menuChildElement.addClass('menu-pos-invert');
    }[/ch_pre]

and replace it with:
[ch_pre type="js"]if( !$body.hasClass('rtl') && windowWidth - (menuChildWidth + menuChildOffset.left) < 0) {
$menuChildElement.addClass('menu-pos-invert');
}

if( $body.hasClass('rtl') && ( menuChildOffset.left < 0) ) {
$menuChildElement.addClass('menu-pos-invert');
}[/ch_pre]

  1. You can simply link the Font Awesome CSS CDN Link or the Local File in the Document `` after the css/font-icons.css File and then use the Icon Classes as suggested by Font Awesome.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

HheijiJan 27, 2022

Hello,
I made the requested changes but still the same problem the menu does not change position so that it is next to the logo.
Thank you for your efforts.

SSemicolon WebSTAFFJan 28, 2022

Hello,

For the Menu to be next to the Logo, you will need to add the .me-lg-5 Class to the #logo DIV and then the .flex-lg-fill Class to the .primary-menu Element.

Additionally, the JS Codes we have provided above have been tested, so since it is not working for you, we request you to please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

HheijiJan 28, 2022

Hello,
Thank you very much, everything is working fine.

you are the best.

SSemicolon WebSTAFFJan 28, 2022

Hello,

Rally Glad that the issues were resolved. Very Happy to Help! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard