XF 2.1 Responsive Style: move humburger menu from top - left to top - right

Scandal

Well-known member
Any idea how to achieve this?
xf.png

I can find the code of humburger menu button and move it on the necessary location of the header, but don't know how to make the menu to display (slide effect / animation) from right to left instead of left to right (which is used currently cause the button is on the left side).

I want the menu to appear via the slide effect on this direction:
<---- start

The red arrow on the above mockup has to do with the location of the button. I can do this, but need help with the animation of the menu.
 
Last edited:
Try to show locally on your smartphone or via the resize of the window to see xenforo.com/community in mobile responsive mode.
Then click the humburger menu. This it its move:
start -->

I need the same thing but from the opposite side of the window.

Since the button will be on the right side, the menu should start from the right side to animate. ;)
<---- start
 
I think it is in core_offcanvas.less

CSS:
    & when(@ltr)
    {
        .m-dropShadow(2px, 0, 5px, 0, .25);
        .m-transform(translateX(-280px));
    }

    & when(@rtl)
    {
        .m-dropShadow(-2px, 0, 5px, 0, .25);
        .m-transform(translateX(280px));
    }
 
Thanks ozzy!
For anyone who want it, this is a solution:
CSS:
.offCanvasMenu-content
{
    float: right;
    position: relative;
    width: 280px;
    max-width: 85%;
    height: 100%;
    padding-bottom: 44px;
    overflow: auto;
    .m-transition(all; @_offCanvas-animationLength; ease-in-out);
    -webkit-overflow-scrolling: touch;

    & when(@rtl)
    {
        .m-dropShadow(2px, 0px, 5px, 0, .25);
        .m-transform(translateX(-280px));
    }

    & when(@ltr)
    {
        .m-dropShadow(-2px, 0px, 5px, 0, .25);
        .m-transform(translateX(280px));
    }

    .is-active &
    {
        .m-transform(translateX(0));
    }

    .p-nav-content {
        margin-bottom: 96px;
    }
}
 
Top Bottom