Jmontgomery

Thank you so much. I greatly appreciate it.

The problem with this, is it brings the footer before the entire section, breaking the divider and making that page look ... bad. Before: After: This reverted the change back to normal rather than doing it for the page footer. After all this, I finally give up. Here's what I did: I'd love to do the other option, but I'll have to hire a dev to work on that later. Right now, it's more trouble than it's worth. Thank you so much for your help. I'm sorry to have wasted your time, but I did learn lots. Thank you so much. 💜 Once I get my deadlines sorted, I'll be back.

This didn't work. I tried adjusting the footer's (the section that gets invaded by the sticky menu) z-index as well as the block's z-index. Failing that, I tried adjusting the z-index for the section before it, and still no change. It isn't overriding the original CSS. This worked for the overlap. Since I had it on max-width, I had to put it to 1200px to get it to not overlap. It's a trigger warnings page for my books, revealing spoilers for readers (through spoiler tags in case they don't want the spoilers) who have trauma to feel secure in what they're reading. The left sidebar is the list of my books. The right content block has the spoilers, explanations, etc. for each book, separated by series. Each book in the sidebar has a link to the corresponding book in the main content through anchor tags. I tried again with a summary block as I've seen in a tutorial. While it did fix the horizontal overlapping issue, it hasn't fixed the vertical overlapping issue. I'm also finding it harder to style the summary block than the code block. For instance, I can change all the font sizes of the menu to the same size (18px in the current state of affairs), but I'd like for the main list to have a font size of 18px with the sub-list having a font size of 16px to make it easier to distinguish between series titles and book titles. It's not a huge deal, but a wishlist item. Another example is the list style. The bullet point overlaps the custom list style. And when I try to make the block sticky, it does the same thing as the previous code block. So, I don't know. Here's the new CSS for the summary block. I know I'm doing something wrong. #block-yui_3_17_2_1_1700890839960_10914 { position: fixed; top: 0; left: 0; height:95%; margin: 30px; padding: 0px 20px; overflow: auto; } #block-yui_3_17_2_1_1700890839960_10914.sqs-block-summary-v2 .summary-metadata-item { display: none; } #block-yui_3_17_2_1_1700890839960_10914.sqs-block-summary-v2 .summary-excerpt p, .sqs-block-summary-v2 .summary-excerpt ul[data-rte-list], .sqs-block-summary-v2 .summary-excerpt li { list-style: outside "📚 "; margin: 0; font-size: 18px; } #block-yui_3_17_2_1_1700890839960_10914.sqs-block-summary-v2, .summary-excerpt p, .sqs-block-summary-v2 .summary-excerpt ul[data-rte-list], .sqs-block-summary-v2 .summary-excerpt li > ul > li { list-style: outside "📘 "; margin: 0; font-size: 16px; } Here's the link and pass again. https://devonvesper.squarespace.com/trigger-warnings pass: chatzy And thank you so much for your help. I know just enough HTML and CSS to get myself into... this kind of trouble. LOL

https://devonvesper.squarespace.com/shop pass: chatzy I'm just coming over from WordPress + WooCommerce where I had print books for sale through Lulu as my print book print-on-demand dropshipper. Is there any such thing I can do on Squarespace where I don't have to store inventory and ship myself or have my customers go to a different site to buy the books? I'd like it to be seamless and check out on my Squarespace storefront like the rest of my products. I don't mind redoing my entire catalog (cries). I'd prefer BookVault, but I'd also go for Lulu since I already have my books up on their site. I'm also open to other suggestions, as well. Thank you so much!

Okay. New problem. It's all great except when you scroll past the section the sticky block is in. The sticky block is still there, ruining the section below it. How do I get it to disappear behind the section below it? https://devonvesper.squarespace.com/trigger-warnings password: chatzy CSS /* Show Sticky Block on Desktop Screens */ @media screen and (max-width:768px) { #block-yui_3_17_2_1_1700778324509_6890 { display: none; } } /* Sticky Menu */ .fe-block-yui_3_17_2_1_1700778324509_6890 { position: fixed; top: 0; left: 0; height:95%; margin: 30px; padding: 0px 20px; overflow: auto; } .series { list-style: outside "📚 "; margin: 0; font-size: 20px; } .books { list-style: outside "📘 "; margin: 0; font-size: 18px; padding-left: 30px; } HTML <div id="triggers" class="sticky-scroll"> <div class="sc-scrollbar"> <ul class="series"> <li><a rel="noopener" href="#godjars">The God Jars Saga</a> <ul class="books"> <li><a rel="noopener" href="#fated">Fated</a></li> <li><a rel="noopener" href="#saviors">Saviors</a></li> <li><a rel="noopener" href="#avristin">Avristin</a></li> <li><a rel="noopener" href="#possessed">Possessed</a></li> <li><a rel="noopener" href="#support">Support</a></li> <li><a rel="noopener" href="#mentor">Mentor</a></li> <li><a rel="noopener" href="#betrayal">Betrayal</a></li> <li><a rel="noopener" href="#marshal">Marshal</a></li> <li><a rel="noopener" href="#anchors">Anchors</a></li> <li><a rel="noopener" href="#incursion">Incursion</a></li> <li><a rel="noopener" href="#solstice">Solstice</a></li> </ul> </li> <li><a rel="noopener" href="#fe">Fated Elves</a> <ul class="books"> <li><a rel="noopener" href="#ekc">The Elven King's Captive</a></li> <li><a rel="noopener" href="#ekl">The Elven King's Love</a></li> <li><a rel="noopener" href="#ekp">The Elven King's Promise</a></li> <li><a rel="noopener" href="#ekf">The Elven King's Forever</a></li> </ul> </li> <li><a rel="noopener" href="#sboa">Soulbond: The Omega's Assassin</a></li> <li><a rel="noopener" href="#ar">Adradis Rising</a> <ul class="books"> <li><a rel="noopener" href="#kh">King's Heart</a></li> <li><a rel="noopener" href="#sr">Sol's Redemption</a></li> <li><a rel="noopener" href="#born">Elven Born</a></li> <li><a rel="noopener" href="#blood">Elven Blood</a></li> <li><a rel="noopener" href="#eldrake">Eldrake</a></li> <li><a rel="noopener" href="#eldrakar">Eldrakar</a></li> </ul> </li> <li><a rel="noopener" href="#tridentcove">Trident Cove</a> <ul class="books"> <li><a rel="noopener" href="#diy">Drowning In You</a></li> <li><a rel="noopener" href="#averlon">Averlon</a></li> <li>Pater</li> <li>Karn</li> <li>Revyn</li> </ul> </li> </ul> </div> </div> The block comes out from underneath the previous section (which I love) but overlaps the footer, which I'd like it not to do. Also, when the screen size is changed on Desktop, the menu overlaps the content. Is this a thing that won't work, something I should just give up and put "back to menu" links under each heading? Or is there something that can make this look professionally done? I know it's probably because of my "position: fixed" bit, but position: sticky wouldn't allow the scrollbar for the extremely long side menu.

Edit to the previous post: I think I figured it out. It's working in Firefox and Chrome, and it's looking okay on mobile. Here's what I did. TL;DR - I changed min-width to max-width to target only desktop with the menu, hiding it everywhere else. I played with the padding and margins. I also changed overflow-y: scroll to overflow: auto, reduced the fixed height to 95% to keep the block on the screen so it quit getting clipped, and changed the font sizes on the lists to take up a little less space. If you have any suggestions on anything or see errant code that doesn't need to be there, I'm happy to be educated. /* Show Sticky Block on Desktop Screens */ @media screen and (max-width:768px) { #block-yui_3_17_2_1_1700778324509_6890 { display: none; } } /* Sticky Menu */ .fe-block-yui_3_17_2_1_1700778324509_6890 { position: fixed; top: 0; left: 0; height:95%; margin-right: 30px; padding: 0px 20px; overflow: auto; } .series { list-style: outside "📚 "; margin: 0; font-size: 20px; } .books { list-style: outside "📘 "; margin: 0; font-size: 18px; padding-left: 30px; }

Thank you so much for the quick reply! The site is https://devonvesper.squarespace.com/trigger-warnings with the password: chatzy I gave your code a try, then researched other mobile breakpoints. So I changed it to 320px. The menu disappears on mobile, but the scrollbar is still there. The other problem is it still makes it disappear on desktop. From what I'm reading, viewport height and dynamic viewport height are the problems. But without it, the scrollbar doesn't work on the menu. It sticks to the visible viewport, but it won't scroll, cutting off a chunk of the menu. I rewrote the code to: /* Sticky Menu */ /* Hide Block on Media Screens */ @media screen and (min-width: 320px) { #block-yui_3_17_2_1_1700778324509_6890 { display: none; } } /* Make Desktop Visible and Sticky */ .fe-block-yui_3_17_2_1_1700778324509_6890 { position: fixed; top: 0; left: 0; height:100%; margin: 40px 0px 40px 0px; overflow-y: scroll; } .series { list-style: outside "📚 "; margin: 0; font-size: 20px; } .books { list-style: outside "📘 "; margin: 0; font-size: 18px; padding-left: 30px; } When I take out the media bit of code, it works on desktop. I'm at a loss.

The site password is: chatzy Hi! I'm super stuck. I have a gigantic, long menu for a page, and I want that menu to scroll vertically within its own block, while also remaining sticky in the window as the main content scrolls with the page in a separate, normal block. My problems: The sticky feature isn't working on Firefox. When I hide the block on mobile, it hides it on the desktop version instead, making no change to the mobile view. I'm not caffeinated enough. Any help is appreciated. Thank you so much. All the best, Jessi Here's my CSS: /* Sticky Menu */ /* Hide Block on Media Screens—This is the code I was using to get it removed from mobile @media screen and (min-width: 768px) { #block-yui_3_17_2_1_1700778324509_6890 { position: absolute; visibility: hidden; display: none !important; } } */ /* Make Desktop Visible and Sticky */ .fe-block-yui_3_17_2_1_1700778324509_6890 { position: -webkit-sticky; position: sticky; top: 0; margin: 40px 0px 40px 0px; height: 100vh; overflow-y: scroll; } .series { list-style: outside "📚 "; margin: 0; } .books { list-style: outside "📘 "; margin: 0; padding-left: 30px; } Here's my HTML: <div id="triggers" class="sticky-scroll"> <div class="sc-scrollbar"> <ul class="series"> <li><a rel="noopener" target="_blank" href="#godjars">The God Jars Saga</a> <ul class="books"> <li><a rel="noopener" target="_blank" href="#fated">Fated</a></li> <li><a rel="noopener" target="_blank" href="#saviors">Saviors</a></li> <li><a rel="noopener" target="_blank" href="#avristin">Avristin</a></li> <li><a rel="noopener" target="_blank" href="#possessed">Possessed</a></li> <li><a rel="noopener" target="_blank" href="#support">Support</a></li> <li><a rel="noopener" target="_blank" href="#mentor">Mentor</a></li> <li><a rel="noopener" target="_blank" href="#betrayal">Betrayal</a></li> <li><a rel="noopener" target="_blank" href="#marshal">Marshal</a></li> <li><a rel="noopener" target="_blank" href="#anchors">Anchors</a></li> <li><a rel="noopener" target="_blank" href="#incursion">Incursion</a></li> <li><a rel="noopener" target="_blank" href="#solstice">Solstice</a></li> </ul> </li> <li><a rel="noopener" target="_blank" href="#fe">Fated Elves</a> <ul class="books"> <li><a rel="noopener" target="_blank" href="#ekc">The Elven King's Captive</a></li> <li><a rel="noopener" target="_blank" href="#ekl">The Elven King's Love</a></li> <li><a rel="noopener" target="_blank" href="#ekp">The Elven King's Promise</a></li> <li><a rel="noopener" target="_blank" href="#ekf">The Elven King's Forever</a></li> </ul> </li> <li><a rel="noopener" target="_blank" href="#sboa">Soulbond: The Omega's Assassin</a></li> <li><a rel="noopener" target="_blank" href="#ar">Adradis Rising</a> <ul class="books"> <li><a rel="noopener" target="_blank" href="#kh">King's Heart</a></li> <li><a rel="noopener" target="_blank" href="#sr">Sol's Redemption</a></li> <li><a rel="noopener" target="_blank" href="#born">Elven Born</a></li> <li><a rel="noopener" target="_blank" href="#blood">Elven Blood</a></li> <li><a rel="noopener" target="_blank" href="#eldrake">Eldrake</a></li> <li><a rel="noopener" target="_blank" href="#eldrakar">Eldrakar</a></li> </ul> </li> <li><a rel="noopener" target="_blank" href="#tridentcove">Trident Cove</a> <ul class="books"> <li><a rel="noopener" target="_blank" href="#diy">Drowning In You</a></li> <li><a rel="noopener" target="_blank" href="#averlon">Averlon</a></li> <li>Pater</li> <li>Karn</li> <li>Revyn</li> </ul> </li> </ul> </div> </div>