[Resolved] Mobile off-canvas panel width.

Home Forums Support Mobile off-canvas panel width.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1192010
    Mike

    Im trying to make my mobile off canvas panel wider. I tried using this css that was suggested in another thread:

    .offside–left.is-open, .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);
    }
    .offside–right.is-open, .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);
    }

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

    But this code results in the panel only working on certain pages.

    #1192105
    David
    Staff
    Customer Support

    Hi there,

    where did you add the CSS to your site ? If it is in a Child Theme or Customizer > Additonal CSS then it should apply to all pages. So maybe your plugin or browser caches need clearing ?

    I would suggest you add that code inside a media query like so:

    @media (min-width: 450px) {
    
    /* CSS in here */
    
    }

    That way it will only apply to devices that are wide enough to accomodate the wider size. I have increased it by 50px so the user has someway of closing the panel….

    #1192111
    Mike

    Hi David,

    The code went inside Customizer > Additonal CSS.

    Should have specified what I meant by not working. Basically, when I click on the menu button, a transparent grey layer covers the screen.

    #1192132
    Mike

    This is what I have now:


    @media
    (min-width: 450px) {
    .offside–left.is-open, .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);
    }
    .offside–right.is-open, .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);
    }
    .main-navigation.offside {
    width: 400px;
    }
    .offside–left {
    left: -400px;
    }
    .offside–right {
    right: -400px;
    }
    .offside-js–is-left.slide-opened .slideout-overlay button.slideout-exit {
    left: 395px;
    }
    }

    If I click on the menu button while on the home page, I get the grey screen. If I click on the menu while on certain pages, it works well.

    #1192135
    Mike

    I think the issue is unrelated to the above code as when I remove it, I still have this issue.

    #1192203
    David
    Staff
    Customer Support

    Thats peculiar – something is adding a display: none; property to the menu.
    Can you try disabling other plugins or any custom functions to see if there is a conflict.

    #1192210
    Mike

    I think I will just stick with the regular menu for now. Thanks =)

    #1192240
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.