Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

symean

Member
  • Posts

    2
  • Joined

  • Last visited

  1. 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 🙂
  2. 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 :)
×
×
  • Create New...