[Support request] Changing width of slide-out menu

[Ryan]

Changing width of slide-out menu

How do I change the width of slide-out menu on mobile to 80% of screen

[David]

Hi there,

try this:

@media (max-width: 768px) {

    .offside--left.is-open,
    .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(80vw, 0, 0);
        -moz-transform: translate3d(80vw, 0, 0);
        -ms-transform: translate3d(80vw, 0, 0);
        -o-transform: translate3d(80vw, 0, 0);
        transform: translate3d(80vw, 0, 0);
    }

    .offside--right.is-open,
    .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-80vw, 0, 0);
        -moz-transform: translate3d(-80vw, 0, 0);
        -ms-transform: translate3d(-80vw, 0, 0);
        -o-transform: translate3d(-80vw, 0, 0);
        transform: translate3d(-80vw, 0, 0);
    }

    .main-navigation.offside {
        width: 80vw;
    }

    .offside--left {
        left: -80vw;
    }

    .offside--right {
        right: -80vw;
    }
    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        right: auto !important;
    }
    .offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
       left: auto !important;
    }
}

[Ryan]

after changing the width the Cross sign “X” at the top left hand corner disappeared.

[David]

Can you link me to the Site, you can edit your original topic and use the Site URL field for privacy.

[Ryan]

I have set the link to the site. Can you help me take a look.

[David]

I edited the code above – give that a shot.

[Author]

Posts