- This topic has 9 replies, 3 voices, and was last updated 1 year ago by
David.
-
AuthorPosts
-
January 14, 2020 at 3:08 pm #1132295
eden
ok I have managed to make the menu slide from the right but i need help with some fixes https://imgur.com/a/mQcIHm7
First I have hebrew language so i need to align the words to the right,
Second I would like to make the opened menu to be smaller (so it will not cover the most of the screen when it open),
And last I would like to add a divider between each link in the menu.Can you help me with it ?
January 14, 2020 at 5:40 pm #1132377Tom
Lead DeveloperLead DeveloperHi there,
Try this CSS:
.slideout-navigation button.slideout-exit, #generate-slideout-menu .slideout-menu li { text-align: right; } .slideout-navigation .slideout-menu li:not(:last-child) { border-bottom: 1px solid #ca6127; }
As for the width, this reply should help: https://generatepress.com/forums/topic/width-slideout-menu/#post-586968
Just try replacing the value there with something like
200px
.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 15, 2020 at 12:02 am #1132540eden
Your code worked perfectly but i am sorry i couldnt make it work with the link you gave me,
Tried my best but no change with the menu width.Can you write me here a code ?
January 15, 2020 at 3:59 am #1132714David
StaffCustomer SupportTry This CSS:
@media (max-width: 768px) { .main-navigation.offside { width: 200px; right: -200px; } .offside--right.is-open, .offside-js--is-right .offside-sliding-element { -webkit-transform: translate3d(-200px,0,0); -moz-transform: translate3d(-200px,0,0); -ms-transform: translate3d(-200px,0,0); -o-transform: translate3d(-200px,0,0); transform: translate3d(-200px,0,0); } .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit { right: 200px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 15, 2020 at 4:03 am #1132716eden
No it did not work,
It only affected the desktop version which i dont want to change.I only want the menu sidebar to be used and changed in mobile – the code did not affect it.
January 15, 2020 at 5:02 am #1132764David
StaffCustomer SupportI edited the code to apply only to mobile
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 15, 2020 at 5:10 am #1132774eden
Ok It is now affecting only the mobile,
But is not good because it breaks the design and it is not affecting the opened menu
you can see it here https://imgur.com/a/y2KsKDQJanuary 15, 2020 at 5:20 am #1132782David
StaffCustomer SupportMade one last edit above
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 15, 2020 at 5:40 am #1132787eden
Perfect ! Thank you !
January 15, 2020 at 6:05 am #1132804David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.