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

Home Forums Support Increase the width of the menu items in slide out menu

This topic contains 3 replies, has 3 voices, and was last updated by  David 4 days, 9 hours ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #778874

    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.

    GeneratePress 2.2.1
    GP Premium 1.7.7
    #779331

    Tom Lead Developer

    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 🙂

    #779690

    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?

    #779799

    David Customer Support

    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);
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.