Slide out menu width

[Escobar]

I have changed my secondary menu to slide out on the desktop version but it seems to look a bit cramped. How can I make it a little wider on desktop version?

My site is: https://www.mivestuariolaboral.com

[Leo]

Hi there,

Try this:
https://generatepress.com/forums/topic/slideout-menu-width/#post-1387321

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

[Escobar]

I have put it.
I had already tried it but the mobile version changes and it’s too wide, and the X of the closure is not seen.
Take a look please

[Leo]

Let’s make the code desktop only first:

@media (min-width: 769px) {
    body .offside--left.is-open, body .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(400px,0,0);
        -moz-transform: translate3d(400px,0,0);
        -ms-transform: translate3d(400px,0,0);
        -o-transform: translate3d(400px,0,0);
        transform: translate3d(400px,0,0);
    }
    body .offside--right.is-open, body .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-400px,0,0);
        -moz-transform: translate3d(-400px,0,0);
        -ms-transform: translate3d(-400px,0,0);
        -o-transform: translate3d(-400px,0,0);
        transform: translate3d(-400px,0,0);
    }

    body .main-navigation.offside {
        width: 400px;
    }
    body .offside--left {
        left: -400px;
    }   
    body .offside--right {
        right: -400px;
    }
    body .offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
        left: 395px;
    }
}

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

[Escobar]

Perfect!!!
Could we just make the font size for the mobile version a little smaller?

[David]

Hi there,

you can change the Mobile font size in Customizer > Layout > Typography – just select the mobile icon to change that

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

[Escobar]

It Works like a charm!
Thanks.

[Leo]

No problem 🙂

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

[Author]

Posts