Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Reverse / Flip Position of Slideout Menu (Right)

Home Forums Support Reverse / Flip Position of Slideout Menu (Right)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #175210
    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?

    #175356
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .slideout-navigation {
        left: auto !important;
        right: 0;
        transform: translateX(100%) !important;
    }
    
    .slide-opened .slideout-navigation {
        transform: translateX(0px) !important;
    }
    #175410
    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..

    #175510
    Tom
    Lead Developer
    Lead Developer

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

    #218935
    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?

    #218946
    Tom
    Lead Developer
    Lead Developer

    On mobile or desktop (or both)?

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

    #260874
    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.

    #260957
    Tom
    Lead Developer
    Lead Developer

    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.

    #263316
    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.

    #263485
    Tom
    Lead Developer
    Lead Developer

    You could do this:

    .slideout-toggle.opened {
        display: none;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.