[Resolved] Off-Canvas Customization

Home Forums Support Off-Canvas Customization

This topic contains 16 replies, has 3 voices, and was last updated by  David 2 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
  • #1141594



    I’m struggling with some minor display issues with a customized Off-Canvas menu. I need the close X button to be in the top-left corner of the panel within the dark border on the left of the screen. When resizing a desktop browser down to tablet/mobile size it displays fine. However, on a real-world device (iPhone 5s) the X is in the middle of the logo.

    Also again on a real-world device, it won’t allow you to scroll to the very bottom of the panel where there is more links etc.

    I’ve been wrestling with this for a while now so would appreciate some fresh eyes on it.




    Tom Lead Developer

    Hi Andy,

    I’m not noticing any issues on my Pixel.

    What browser are you using?



    Hmmm I’ve tried Safari, Chrome and now Brave Browser and they all have the same problem.

    Is the X definitely showing in the top-left corner for you?


    Tom Lead Developer

    Here’s what I’m seeing: *removed*

    What if you use incognito mode?



    Hmmm, thats really odd, even does it using incognito, it does appear to just be my phone then.

    Are you also getting the unwanted horizontal scroll? I have overflow-x:hidden; set on the body but it’s not helped.

    Would appreciate it if Dave or Leo could confirm the issue or not too. Could you please now delete the screenshot as it’s still in development.



    David Customer Support

    Hi Andy,

    bit peculiar try adding this CSS:

    #generate-slideout-menu.slideout-navigation.do-overlay .slideout-exit {
        text-align: left !important;

    Not seeing horizontal scroll – any particular page ?



    Hi David,

    Are you seeing the X in the right place too? And can you scroll to the bottom of the off-canvas panel?

    Only see the horizontal scroll on built pages like the Transport page. It’s not obvious but you can drag/swipe left and right a few pixels, it’s as though it’s not quite centred in the viewport.


    David Customer Support

    Could you disable your Cache ? I am not sure if we’re all seeing the same thing ….



    I’ve purged cache again and then disabled, it but still seeing the same issues on iPhone 5s. I’ve edit the URL attached to this thread with a video clip showing the issue.



    Sorry, after adding your CSS the X is now in the correct position! However, I still have the horizontal scroll issue and can’t scroll to bottom of off-canvas panel.


    David Customer Support

    So on the Transport & Logistics it is the Slider that is creating overflow as its too wide for te container.
    And the Off Canvas is not scrolling becuase of this CSS:

    #generate-slideout-menu.main-navigation.offside {


    Thanks David, I’ll look into tweaking the slider. Regarding that CSS if I don’t set it as overflow:visible; or overflow:unset; then the X is not displayed, but both these options cause the vertical scrolling issue.


    David Customer Support

    In the Off canvas customizer settings you have the option to place the exit outside, which should solve that issue ?



    Unfortunately, the Overlay style doesn’t have that option: https://prnt.sc/qsgi5m


    David Customer Support

    Instead of adding the border to off canvas you can create the same effect with an inset box shadow, then you can leave the overflow alone:

    #generate-slideout-menu.slideout-navigation.do-overlay {
        padding-left: 54px;
        box-shadow: inset 54px 0px 0px 0px rgba(27,64,76,1);
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.