- This topic has 9 replies, 4 voices, and was last updated 6 years ago by
Tom.
-
AuthorPosts
-
February 25, 2016 at 1:09 pm #175210
Webmaster
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 #175356Tom
Lead DeveloperLead DeveloperGive 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-developmentFebruary 26, 2016 at 3:52 am #175410Webmaster
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 #175510Tom
Lead DeveloperLead DeveloperThat 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-developmentAugust 17, 2016 at 9:46 am #218935Andrew
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 #218946Tom
Lead DeveloperLead DeveloperOn 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-developmentJanuary 5, 2017 at 4:28 am #260874Marcel
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 #260957Tom
Lead DeveloperLead DeveloperHi 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-developmentJanuary 12, 2017 at 5:37 am #263316Marcel
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 #263485Tom
Lead DeveloperLead DeveloperYou 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 -
AuthorPosts
- You must be logged in to reply to this topic.