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 🙂
