Site logo

Archived topic

Making container sticky on mobile devices.

5 replies · Started by Sean on March 9, 2023

Viewing posts 1–6 of 6

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

Hi,

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

Hi Sean,

Try this code instead:

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

Thank you that worked brilliantly!

You're welcome, Sean!

This archived topic is closed to new replies.