Feature request: position sticky

[skndal]

Hi there,

Been searching the forums recently a lot for all kinds of information on creating layouts with sticky positioned elements, and thanks to some extensive custom CSS we’ve managed to make it work. However, the power and charm of the Cornerstone builder has always been that since the last major updates it has so many powerful features supported out of the box. And while I know there are several things that make it difficult with Pro/X, it would be a valuable addition for anyone building complex informative layouts.

Therefore, please consider this a humble feature request:

Please support position: sticky; out of the box!

⠀
⠀
On behalf of your users, many thanks!
⠀

---

⠀

For anyone wondering how, a few key pointers:

• Add to your page’s CSS body { overflow-x: visible; } because sticky positioning will not work if any ancestors have overflow set to hidden. With X/Pro, overflow-x is default set to hidden for reasons (that don’t make sense to me).
• Accept that once you do the above, on mobile devices, there is a thin strip of approx. 20px that a user can horizontally touch-scroll into view. I haven’t managed to get rid of it.
• For the containing element, ensure it’s height is set or inherited somehow
• For the sticky element, add $el { position: sticky; } in custom CSS.
• My advice is to use a new Div element, since those are great to move around in your layout ‘skeleton view’ and support absolute positioning out of the box. You can use that to set the top, right, bottom and left values for easy adjusting later.
• Finally, your sticky element may behave buggy in Chrome on mobile, when scrolling down the top: 0; might not be respected causing the element to scroll slightly out of viewport. You can fix that by adding minimum-scale=1 to the <meta name="viewport" part of WordPress’ header.php entry. For X/Pro it is located in the folder wp-content\themes\pro\framework\views\global\_meta.php. You can copy the folder structure and file into your Child Theme to adjust it. The end-result should be something like <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">

More reading:

Make row or element sticky within section

Hey Jeffrey, position: sticky won’t work if a containing parent’s overflow property is set to hidden and that is the case in our themes to support features of our builders and more. Your claim that it’s simple with CSS properties is only true for basic HTML structures and if you’re following simple tutorials. CSS development is actually complex if you take into account a lot of things that’s why not everything can be achieved easily. Please understand that our theme and builders are only struc…

Page uses the meta tag "viewport" twice on the page

I use SEOprofiler to optimise this site’s SEO: www.emeraldsom.co.uk. Following the Website Audit, it identified that all the pages " uses the meta tag “viewport” twice on the page". Am I right in thinking this is something to do with the code, and therefore, how would I fix it?

Good luck!

[ruenel]

Hello @skndal,

Thank you for your feedback. We have added this in our enhancement list as a a feature request.

Best Regards.