[Resolved] Making Off Canvas Panel Width 310px With No Luck!

Home Forums Support [Resolved] Making Off Canvas Panel Width 310px With No Luck!

Home Forums Support Making Off Canvas Panel Width 310px With No Luck!

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1569666
    Ethan

    Hi there, I am trying to make my off canvas panel a bit wider both on mobile and tablets.

    I am particularly aiming for iPhones (500px) and non-pro iPads (768px). I changed the code in Customise > Additional CMS like this:

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

    I assume it will change the width for all devices. Okay it changes but when I close the panel it still overflows, so the menu looks like it doesn’t close completely (sorry I hope I made it clear).

    Could you please help.

    #1569688
    Elvin
    Staff
    Customer Support

    Hi,

    You can try this CSS:

    /* for screens not larger than 768px */
    @media(max-width:768px){
    nav#generate-slideout-menu {
        width: [your width here];
    }
    }
    /* for screens not larger than 600px */
    @media(max-width:600px){
    nav#generate-slideout-menu {
        width: [your width here];
    }
    }

    We’re basically setting different widths for different view widths. You can change 600px within the @media rule to your preferred view width to apply rules on.

    A wise man once said:
    "Have you cleared your cache?"

    #1569691
    Ethan

    Hi Elvin, it’s still not working πŸ™

    It still leaves some of the slider’s part on the screen when you close the menu on mobile and ipad πŸ™

    #1569744
    Elvin
    Staff
    Customer Support

    Ah that’s right.

    We need to target only the open state of the offcanvas menu which is the .is-open selector.

    Try this.

    /* The container */
    .main-navigation.slideout-navigation.is-open {
        width: fit-content;
    }
    /* The actual off canvas width */
    .main-navigation.slideout-navigation.is-open .inside-navigation {
        width: 310px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1570039
    Ethan

    This one worked like charm, thanks Elvin πŸ™‚

    #1570074
    Elvin
    Staff
    Customer Support

    Nice one! Glad its working for you.

    No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

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