symean

Well I think I figured this out through a lot more trial and error, and poring over the elements in the Chrome Inspector.

My 'sub-navigation' section is #2 on the page, so here's the basic code structure I used, inserted into the individual page Advanced code:

<style>
    .page-section:nth-child(2) {
        position: -webkit-sticky!important;
        position: sticky!important;
        top: 0px;
        z-index: 99999;
    }
</style>

I did not target the section ID because I wanted to make it easy to copy-paste to other pages.

After I got it functional I wanted it pretty, so I added more styling CSS to the body and sub-divs of nth-child(2) to shrink the vertical size and make the background transparent and blurry:

<style>
	body{
		background-color: white !important;
	}
    .page-section:nth-child(2) {
      	min-height: 5vh !important;
		background-color: inherit;
        position: -webkit-sticky!important;
        position: sticky!important;
        top: 0px;
        z-index: 99999;
    }
    .page-section:nth-child(2) > .section-background {
		background-color: rgba(255,255,255,.75) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
	}
    .page-section:nth-child(2) > .content-wrapper {
      	padding-bottom: 0px !important;
	}
</style>

The background color was a nightmare. My code looks messy because I set the 'background-color' property three times here, but this is the only combination that worked for me where all sections have a white background.

If anyone knows how to just use the background color of the theme chosen for the section, and only add transparency in the CSS let me know 🙂

Hi,

I'm trying to add a sticky section or block to a page.

To make this easy to add to future pages without specifying particular block or section IDs, I am happy to apply it to all instances of a particular style or type of block, which would only be used for this purpose. I'm thinking either Heading 4 in a text block, or the Content Link block, unless you have a better suggestion.

Best example of this behaviour I can find is by Apple:

https://www.apple.com/au/ipad-air/

...note the main nav is not fixed, but the 'sub-nav' of iPad Air pages (Overview, Why iPad, etc) remains sticky at the top.

Any ideas?

Cheers :)