Archived topic
I need help with customizing my menu mobile siderbar
9 replies · Started by eden on January 14, 2020
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 ?
Hi 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.
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 ?
Try 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;
}
}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.
I edited the code to apply only to mobile
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/y2KsKDQ
Made one last edit above
Perfect ! Thank you !
You're welcome
