[Resolved] Increase the width of the menu items in slide out menu

[Ian]

The menu items in the slide out menu are not wide enough. I would also like to give the menu items some top and left margin for left slide out.

[Tom]

Hi there,

You could try something like this:

.offside--left.is-open {
    -webkit-transform: translate3d(350px,0,0);
    -moz-transform: translate3d(350px,0,0);
    -ms-transform: translate3d(350px,0,0);
    -o-transform: translate3d(350px,0,0);
    transform: translate3d(350px,0,0);
}

.main-navigation.offside {
    width: 350px;
}

.main-navigation.offside.is-open {
    margin: 50px 40px;
}

.offside, .offside--left {
    left: -350px;
}

.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    left: 40px;
    top: 0;
}

Let me know 🙂

[Ian]

Thanks Tom, perfect. One little thing, no big deal but if I want to change the colour and transparency of that slide out background what would I add?

[David]

Hi there,

you can change the slideout navigation colors in the customizer, to change the overlay then this CSS:

.slideout-overlay {
    background-color: rgba(0,0,0,0.5);
}

[Author]

Posts