RC2 - Sticky Rows / Columns etc.?

Hey Team

Not sure where I saw it, but I thought I saw somewhere where you can make elements sticky? Or rows, or columns etc?

Is it in the new Effects or Customize tabs? Or was I seeing things…

Basically I’m aiming to have a Row with clickable letters remain ‘sticky’ on scrolling so as to be able to easily navigate the letters on Mobile etc:

Thanks
Sam

I’m not sure but I think I saw something along those lines on the new Div element

1 Like

Hey @futronline and @scotbaston! It is in the Div Element, but currently doesn’t “work” due to the fact that X / Pro’s html / body elements receive an overflow-x: hidden declaration to ensure that any Elements flying in from the side of the screen don’t set off a scrollbar. I couldn’t tell you why, but the CSS spec does not allow sticky elements inside of overflow: hidden elements. So it’s still in the Div for now, but we might remove it…however, you could set it to sticky or use custom CSS and undo the overflow: hidden all the way up the chain if you want and it should work. But keep in mind this feature is a little up in the air at the moment and we plan on having more broad and out of the box support with our theme options reboot down the road.

1 Like

Thanks very much @kory

Sounds like it’ll be better for me to wait for the Theme Options update!

Cheers,
Sam

One neat thing about this update is that you can now set conditions on elements in the header builder, so they’ll only appear on certain pages.

So, you could add a sticky bar to your global header, put those letter anchor links in there, and then set conditions on the bar so it will only appear on the relevant page.

It’s not as clean as having the row of letters stick to the top as you scroll past… but it gets the job done :slight_smile:

That would work - might take some rejiggering of the page to put the content above in Bars as well. Just wanted to confirm we took the position: sticky; off the Div element because even though the style outputs, for reasons Kory mentioned above it.