Site logo

[Resolved] Making container sticky on mobile devices.

Home Forums Support [Resolved] Making container sticky on mobile devices.

Home Forums Support Making container sticky on mobile devices.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2561136
    Sean

    Hi,

    I would like to make the container sticky on mobile devices on the following page.

    https://tudorhouseholidays.co.uk/the-hepburn-scarborough/

    I need the slideshow to be sticky on mobile, it’s placed within a container.

    Kind regards,

    Sean

    #2561242
    David
    Staff
    Customer Support

    Hi there,

    1. Add this CSS to your site:

    @media(max-width: 768px) {
        .is-sticky-mobile {
            position: sticky;
            top: 0;
        }
    }

    Note the top: 0; you can change this to a value eg. top: 60px; to offset the sticky position.

    2. Select the Container Block the slider is in, and in Advanced > Additional CSS Class(es) add: is-sticky-mobile

    #2565548
    Sean

    Hi,

    How do I do it so it appears below the sticky header?

    #2565587
    Fernando
    Customer Support

    Hi Sean,

    Try this code instead:

    @media(max-width: 768px) {
        .is-sticky-mobile {
            position: sticky;
            top: 220px;
        }
    }
    #2565605
    Sean

    Thank you that worked brilliantly!

    #2566608
    Fernando
    Customer Support

    You’re welcome, Sean!

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