Reverse / Flip Position of Slideout Menu (Right)

[maggew]

Here is my problem in a short video-clip.

I desire to change the slideout direction. Instead of making it appear on the left, I wish to make it right, not left. When I add the code below, it works but the animation is choppy.

nav#generate-slideout-menu {
    right: 0px;
    left: initial !important;
}

May you please recommend a superior alternative? Perhaps I can dive into the functions.php or just update some code? Is the slideout animation transition 100% css or is there some J$ love in there?

[Tom]

Give this a shot:

.slideout-navigation {
    left: auto !important;
    right: 0;
    transform: translateX(100%) !important;
}

.slide-opened .slideout-navigation {
    transform: translateX(0px) !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[maggew]

Works perfectly – thanks!

What if we wanted to close the slideout using the ESC hotkey on keyboard? It’ll have 100% usability with this..

[Tom]

That would need to be included in the script – I’ll look into it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andrew]

I noticed that when I added that CSS that it does flip the side, but it also covers up the “X” to close it. Any suggestions?

[Tom]

On mobile or desktop (or both)?

You’d have to float the 3 bars to the left side.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcel]

Hey there,

just started with GeneratePress, I like it so far.

I have the same problem as Andrew. I would like to have the burger-/x-toggle staying at the right.

I moved the ul for the slideout menue down a bit to make room for the toggle.

#menu-slideout-menue {
    margin-top: 169px;
}

I hoped, I can use a z-index of 100001 to get the toggle in front of the menu, but I don’t know which element I have to set the z-index. I tried #generate-slideout-menu, .slideout-toggle even .inside-navigation – all brought the x-toggle to the front and the mouse pointer changes to the finger, when I hover it, but when I click, nothing happens.

Hope, someone knows a solution for this.

[Tom]

Hi there,

Any example of what you’re trying to do?

You can add a custom menu item to your slide-out menu with the class of slideout-toggle and it will close the menu when you click it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcel]

You can see an example at http://junkyard.junkfest.de/, Tom.

The custom menu item may be an solution, but then the visibility of the former “X” should not change to visible, when I click the burger icon.

[Tom]

You could do this:

.slideout-toggle.opened {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts