[Resolved] I need help with customizing my menu mobile siderbar

[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 ?

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[eden]

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 ?

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eden]

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.

[David]

I edited the code to apply only to mobile

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eden]

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

[David]

Made one last edit above

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eden]

Perfect ! Thank you !

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts