Fixed/sticky top position for a container

[Jeremy_AM]

Hi there!

I’m trying to figure out how to fix the position of my top container to my glide page (mobile & desktop).

I’ve read these threads:
https://community.glideapps.com/t/css-sticky-component-how-to/52172/3
https://community.glideapps.com/t/fixed-effect-with-css/41614
https://community.glideapps.com/t/freezing-certain-components/39993

Here’s a screenshot of my editor:

My goal here is to fix at the top of the screen - right below the green nav bar - my “Recap” container with its three title components. As you can see in my screenshot, “Recap” is the first component of my page and the titles are components #2, #3 and #4.

I have four rich text components, the first contains this CSS snippet:

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
background: white;
z-index: 0;
}

For the three others, I just increment the value of nth-of-type() and z-index by 1.

I don’t know if I need one rich text component with CSS to fix my top container only or 4 to fix the container and the 3 titles in it (I’ve tried both and read this post after).

I’ve tried every bits of CSS code posted by @ThinhDinh @Uzo @Himaladin in the topics here and there about how to make a component sticky while scrolling, nothing worked. I’m clearly missing something important here as I’ve also tried to just color a separator line in blue and even this very simple CSS snippet is not working when I add a separator component to my page.

Does CSS snippets still work in Glide? What am I missing here?

Thanks for your help!

[ThinhDinh]

First of all, the rich text hack won’t work in Glide Pages as it is in Glide Apps. We would also not recommend you to use CSS for Glide Apps (if you have projects there) going forward, since it would break very soon.

Next, CSS for Pages is available for Business & Enterprise plans. At the level, I assume you can find the class name of the element you want to target, then try to adjust it as you want.

[Jeremy_AM]

Thanks for your answer, I wasn’t aware of these details. I’ll consider upgrading to Business then!

[Uzo]

I don’t think upgrading to business will solve your problem… You want to fix the element in one position… Pages are made on containers, so you will be able only to fix the position inside the container… that will scroll together with other containers… the only solution will be to make a whole page from custom HTML elements, but that is a lot of work and really hard to control.