Archived topic

Reverse / Flip Position of Slideout Menu (Right)

9 replies · Started by Webmaster on February 25, 2016

Viewing posts 1–10 of 10

February 25, 2016 at 1:09 pm #175210

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?

February 25, 2016 at 11:04 pm #175356

Give this a shot:

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

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

February 26, 2016 at 3:52 am #175410

Works perfectly - thanks!

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

February 26, 2016 at 11:45 am #175510

That would need to be included in the script - I'll look into it.

August 17, 2016 at 9:46 am #218935

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?

August 17, 2016 at 10:04 am #218946

On mobile or desktop (or both)?

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

January 5, 2017 at 4:28 am #260874

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.

January 5, 2017 at 9:37 am #260957

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.

January 12, 2017 at 5:37 am #263316

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.

January 12, 2017 at 12:14 pm #263485

You could do this:

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

This archived topic is closed to new replies.

Start building better websites today.