off-canvas position left doesn't works properly - Forum | JoomShaper
Awaiting an answer Helix Framework

off-canvas position left doesn't works properly

Asked by Gianluca Pantaleo 5 years ago Last activity 5 years ago

Hello, I have Helix Ultime 1.1.4
when I set off-canvas position to Right everything goes ok but when I set off-canvas position to Left my Header breakes. It loads the offcanvas-toggler html code inside #sp-logo column instead #sp-menu column.

15 replies

Ariba Staff
5 years ago · edited

Thank you for the site URL.

Could you also provide me your administrative access, please? Use the hidden mode to share the log in credentials.

Ariba Staff

Thank you.

I can see the credentials in your edited post now. I will look into it and get back to you.

Gianluca Pantaleo Asked this

Ok I to hear you soon. Thanks

Pavel
5 years ago · edited

It loads the offcanvas-toggler html code inside #sp-logo column instead #sp-menu column.

Hi. Yes, this is exactly what happens (not a bug, but not quite a good solution from Joomshaper). To solve the problem, you need to keep offcanvas on the right and configure it to the left via CSS and Menu col settings for mobile.

Gianluca Pantaleo Asked this

What's the specific CSS code have I to write, please? If I keep offcanvas on the right I can put it on the left column but when I click on it it's show the menu transition on the right and from right-to-left, I need to show it on the left and transition from left-to-right. Thanks

Pavel
5 years ago · edited

I am not an employee of the support, so I have no access to the hidden content and your site. In order to help you, I do not need administrator access. Just need to be the site is open to public access.
Or wait for support answer

Gianluca Pantaleo Asked this

Ok, I published the website, you can now refresh and see it here. Thanks

Pavel

Now it is in left.

Set it in right

Gianluca Pantaleo Asked this

Ok, now I set it to right.

Pavel

As far as I see order -1 for Menu col you have already set up.

Here is the remaining code

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}
body.ltr.offcanvs-position-right .body-wrapper,
body.ltr.offcanvs-position-right .offcanvas-menu {
    right: auto !important;
    left: -300px;
}
body.ltr.offcanvs-position-right.offcanvas-active .body-wrapper,
body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu {
    left: 0;
}
Log in to reply.