[Resolved] Creating A Sticky Off Canvas Panel

Home Forums Support [Resolved] Creating A Sticky Off Canvas Panel

Home Forums Support Creating A Sticky Off Canvas Panel

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2011797
    Anthany

    Hi Generatepress support,

    On my website I use the off canvas panel to hold all my product filtering widgets for the mobile version of my website. It is embodied by an HTML widget placed in the “Header” area that your very wise support helped me create a while ago. The off canvas panel button looks like this: https://snipboard.io/toOIEl.jpg , and the HTML used to create it looks like this: https://snipboard.io/mJ6ylW.jpg . I also have the off canvas panel set to “desktop only” as if I do not then the primary navigation on mobile becomes the off canvas panel: https://snipboard.io/59jZ6v.jpg .

    Now to my question, do you know how I could make this off canvas panel button sticky so it follows the user as they scroll down the page on a mobile device?

    You can view the off canvas panel on a mobile device at this URL: https://scuphed.com/brand/hype/

    Apologies for the long inquiry but I figured the details may be helpful.

    Thank you very much for your time, Anthany

    #2012415
    David
    Staff
    Customer Support

    Hi there,

    where the header widget is placed would require Javascript to fix it on scroll.
    If you used a Hook Element to add your button into the after_header hook then we could use some CSS to make it sticky.

    #2012725
    Anthany

    Hi David,

    Gotcha, it has been done!

    Kind regards, Anthany

    #2013033
    David
    Staff
    Customer Support

    OK at the moment your <a> is wrapped in a <p> tag

    Change the markup so instead its wrapped in a div like so:

    <div class="slideout-toggle-container">
    // your toggle <a> element here
    </div>

    Then you can use this CSS to make the container sticky:

    .slideout-toggle-container {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    #2013695
    Anthany

    Hi David,

    Thank you so much for your help, that worked perfectly to make the toggle sticky. I just have one problem functionally. When you scroll down the toggle either hides behind other elements as shown: https://snipboard.io/LzwVBs.jpg , or remains on top but does not click and instead just selects the element below it. Any idea how to make the toggle always remain on top of all other elements and keep it clickable?

    Kind regards, Anthany

    #2013709
    Ying
    Staff
    Customer Support

    We could try add a z-indexto the toggle on top of David’s CSS:

    .slideout-toggle-container {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        Z-index: 99999;  
    }

    Let me know if this helps ๐Ÿ™‚

    #2013845
    Anthany

    Hi Ying,

    That worked like a charm! Thank you so much to both of you for your amazing help.

    Best regards, Anthany

    #2015476
    Ying
    Staff
    Customer Support

    You are welcome Anthany ๐Ÿ™‚

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