[Resolved] Off-Canvas Customization

Home Forums Support Off-Canvas Customization

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

    Hi,

    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.

    Thanks,

    Andy

    #1142061
    Tom
    Lead Developer
    Lead Developer

    Hi Andy,

    I’m not noticing any issues on my Pixel.

    What browser are you using?

    #1142073
    Andy

    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?

    #1142086
    Tom
    Lead Developer
    Lead Developer

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

    What if you use incognito mode?

    #1142094
    Andy

    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.

    Thanks!

    #1142387
    David
    Staff
    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 ?

    #1142461
    Andy

    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.

    #1142704
    David
    Staff
    Customer Support

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

    #1142780
    Andy

    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.

    #1142786
    Andy

    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.

    #1142857
    David
    Staff
    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 {
        overflow:visible
    }
    #1142890
    Andy

    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.

    #1142897
    David
    Staff
    Customer Support

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

    #1143000
    Andy

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

    #1143323
    David
    Staff
    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.