Sticky Scrolling Side Menu

Jmontgomery · November 24, 2023

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>

melody495 · November 24, 2023

Hi @Jmontgomery, please can you share a link to your website? You might have included it in the post, but SquareSpace Forum is not showing it 🙃

10 minutes ago, Jmontgomery said:
2. When I hide the block on mobile, it hides it on the desktop version instead, making no change to the mobile view.

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;
  }
} */

Let's tick off the easy one first.

Your code is hiding it the block on desktop. If you want to hide on mobile, and 768px is your desire breakpoint, then try replacing with the below code. I changed the media query line

/* Sticky Menu */
	/* Hide Block on Media Screens—This is the code I was using to get it removed from mobile
@media screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1700778324509_6890 {
    position: absolute; // I don't think you need this line
    visibility: hidden; //I don't think you need this line
    display: none !important;
  }
} */

Let me know how it goes.

Jmontgomery · November 25, 2023

7 minutes ago, melody495 said:
Hi @Jmontgomery, please can you share a link to your website? You might have included it in the post, but SquareSpace Forum is not showing it 🙃

Let's tick off the easy one first.

Your code is hiding it the block on desktop. If you want to hide on mobile, and 768px is your desire breakpoint, then try replacing with the below code. I changed the media query line
/* Sticky Menu */
	/* Hide Block on Media Screens—This is the code I was using to get it removed from mobile
@media screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1700778324509_6890 {
    position: absolute; // I don't think you need this line
    visibility: hidden; //I don't think you need this line
    display: none !important;
  }
} */
Let me know how it goes.

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.

Jmontgomery · November 25, 2023

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;
}

Jmontgomery · November 25, 2023

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.

Edited November 25, 2023 by Jmontgomery
Added overlap problem.

melody495 · November 26, 2023

18 hours ago, Jmontgomery said:

It's all great except when you scroll past the section the sticky block is in. The sticky block is still there,

The block comes out from underneath the previous section (which I love) but overlaps the footer, which I'd like it not to do.

For this, you can try setting the z-index of the section below, so it is shown on top of the stick side menu bar.

18 hours ago, Jmontgomery said:

Also, when the screen size is changed on Desktop, the menu overlaps the content.

You have 2 options.

You can set your breakpoint to be lower, so that it switches to "mobile mode" quicker, hiding the sidebar when the page is getting too crowded.

To keep the breakpoint the same, and to fix the overlapping issue. Are there 2 code blocks? 1 for sticky menu, 1 for content on the right? Are your code blocks overlapping in the edit mode? If not, then you would need to do something with the width of both code blocks.

18 hours ago, Jmontgomery said:

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?

It's mostly working, but would need to look at the sticky and the content side to get them to work together.

In terms of another way of designing this page, hard to say without knowing more, it depends what that page is for, what do you want your audience to get from that page and does the navigation/layout serve that purpose.

There are a number of workarounds/plugin options out there for side bar, although I don't know without looking if they would do exactly what you are doing right now.

Jmontgomery · November 26, 2023

4 hours ago, melody495 said:

For this, you can try setting the z-index of the section below, so it is shown on top of the stick side menu bar.

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.

4 hours ago, melody495 said:

You can set your breakpoint to be lower, so that it switches to "mobile mode" quicker, hiding the sidebar when the page is getting too crowded.

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.

9 hours ago, melody495 said:

In terms of another way of designing this page, hard to say without knowing more, it depends what that page is for, what do you want your audience to get from that page and does the navigation/layout serve that purpose.

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.

11 hours ago, melody495 said:

There are a number of workarounds/plugin options out there for side bar, although I don't know without looking if they would do exactly what you are doing right now.

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

melody495 · November 27, 2023

10 hours ago, Jmontgomery said:

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.

It worked when I set the footer z-index.

Try this code?

footer#footer-sections {
	z-index:999;
}

If works, then add the section selector, or it'll do it for all footers.

section[data-section-id="65478ecdd795af0b96df3a7c"] footer#footer-sections {
	z-index: 999;
}

Jmontgomery · November 27, 2023

4 hours ago, melody495 said:
Try this code?
footer#footer-sections {
	z-index:999;
}

The problem with this, is it brings the footer before the entire section, breaking the divider and making that page look ... bad.

Before:

After:

4 hours ago, melody495 said:
If works, then add the section selector, or it'll do it for all footers.
section[data-section-id="65478ecdd795af0b96df3a7c"] footer#footer-sections {
	z-index: 999;
}

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.

melody495 · November 27, 2023

8 minutes ago, Jmontgomery said:

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.

Sorry couldn't help more on here. I find it easier to answer specific questions over the forum, whereas for your page because it's highly customised, I would need to sit down and look through your page and all the code to make sure they work together or work a different solution.

You can drop me an email if/when you want to look at this again.

Best of luck!

Jmontgomery · November 27, 2023

3 hours ago, melody495 said:

Sorry couldn't help more on here. I find it easier to answer specific questions over the forum, whereas for your page because it's highly customised, I would need to sit down and look through your page and all the code to make sure they work together or work a different solution.

You can drop me an email if/when you want to look at this again.

Best of luck!

Thank you so much. I greatly appreciate it.

Sticky Scrolling Side Menu

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources