While scrolling in view with single column grid: Sticky elements, and positioning help

Hey there!

On tablets and smaller screens
We got 1-column. There’s a gap between the nav bar and the grid. How do we keep the small tag and the grid fixed as they are before the scrolling starts?

Section 1 title got a top margin of 100px after the tag for some space. When we scroll towards the bottom, Section 2 title appears. But its placement is off in comparison to where Section 1 title was. Is it possible to make Section 2 title 100px from the tag (assuming we can keep the tag fixed as it is)?

Here is my site Read-Only: LINK

Looks like you’ve fixed this one too, or am I missing something?

Hi Jonathan,
Thanks for answering to our recent posts!! Sorry we weren’t clear with this post. So we took a video:


We are referring tablet and smaller screens. We tried to place emphasis on the things we are stuck with:

  1. The white gap between the grid and the nav bar - we want to keep this white space.
  2. Small tag moves when we scroll. Again, we would would like this to be in a fixed placement. Somehow we got it working on desktop, but not for smaller screen sizes.
  3. Notice where “Very Long Section 1 Title” is. As we scroll through the page, “Section 2 title” comes up. Once you get to the bottom of the page, Section 2 title sit higher than where Section 1 title was (at 0.57). Would it be possible for Section 2 end at the same placement as Section 1 title? (at 0.45)

Thanks :grinning:

  1. Section Title Wrapper = sticky top:5% (you might want to change the amount)
1 Like
  1. On Tablet: Section 2 title Margin:top:100 (looks strange in the designer, but good in the page) - must the same margin as the section 1 title
1 Like
  1. You need to create the space. Webspace doesn’t exist unless you make it. Once it’s created you need to fix it in position. I’ll let you play with that idea.
1 Like