Jump to content

Adding a Sticky Element in Sidebar

Recommended Posts

Site URL: https://www.thehomethatroams.com/blog/sailboat-essentials

Hello, I'm trying to make the code block at the bottom of my sidebar plugin sticky using CSS.

I have tried the below with no luck. It sounds like I may need to also target the parent div for it to work, but I'm not sure how to do that.


.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;


Thank you for any help or direction!



Edited by MorganYoungblood
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 4/15/2021 at 4:15 PM, MorganYoungblood said:

No, I haven't been able to fix this yet.

Hi. I don't see Code Block. Also, If you use Sidebar Plugin, it has an option to set sticky. You can check instructions.html file

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

The ads on the webpage are being displayed in a code block in the sidebar plugin, ID is #block-yui_3_17_2_1_1618101487001_10034

When I set the sidebar plugin as sticky, the top of the sidebar is sticky (see attached) instead of being able to target the block with ads as sticky.

This is the CSS provided by the plugin for a sticky sidebar. I have tried a couple of tweaks to this to make #block-yui_3_17_2_1_1618101487001_10034 sticky but have not been successful.

Please let me know if you have any tips!

/* Plugin Sidebar - Custom Styles */
html .sidebar::before {
  content: '{"breakpoint":"980px","positionOnMobile":"bottom","sticky":"yes","stickyTop":"20px"}'!important;

html .sidebar {
  width: 325px;

html .sidebar__inner {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 2;
  height: auto;
  margin: 0 3px;
  padding: 15px 10px 10px;
  background: #f4f3f2;

html body:not(.sidebar-is-stacked) .sidebar {
  width: 325px;
  margin: 0 0 0 25px;

html body.template-v7_1 .sidebar .page-section .content-wrapper {
  padding: 15px 10px 10px!important;

html body.template-v7_1 .sidebar .page-section,html body.template-v7_1 .sidebar .page-section .section-background {
  background-color: transparent!important;

html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar>.content-wrapper .contentwrapper .content,html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar~.page-section.section-has-sidebar>.content-wrapper>.content {
  padding-right: ~"calc(325px + 25px)";
/* end Plugin Sidebar - Custom Styles */



Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.