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!

 

sticky-css.jpg

Link to comment
  • Replies 4
  • Views 898
  • Created
  • Last Reply
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

sticky-sidebar-plugin.jpg

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.