[Support request] Changing width of slide-out menu

Home Forums Support Changing width of slide-out menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #802226
    Ryan

    Changing width of slide-out menu

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

    #802261
    David
    Staff
    Customer Support

    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;
        }
    }
    #802704
    Ryan

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

    #802827
    David
    Staff
    Customer Support

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

    #802859
    Ryan

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

    #802899
    David
    Staff
    Customer Support

    I edited the code above – give that a shot.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.