Archived topic
How To Order and Make 2nd Sidebar element sticky
6 replies · Started by casey on April 20, 2022
Hello,
So up until this point I've had only one "element" in the right sidebar. It was the one with my websites logo and check mark points. I had this element sticky too. This was the CSS I was using to get this done...
@media(min-width: 768px) {
.right-sidebar .site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
.sticky-block {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
}
I now added another element to the right sidebar. It's the one with social media icons. I want this one to be on top, above the one with my logo, but I do NOT want it sticky (right now it is below the other one). On top of this, I'd like the other one to be sticky. So to summarize, how do I make the one with social icons on top and NOT sticky + the element with my site logo below the other one and sticky. Thank you for your help. I've made the previous code inactive while we work this through.
Here's the link to my site:
Hi there,
do you have two separate Elements for them?
If so edit the Element you want to move to the top, and below where you set the Hook is a Priority field, set this to 5
Once its moved let me know if your CSS isnt working, it should but happy to investigate if not.
Yes I have two separate elements for this.
I don't understand this part of your response "If so edit the Element you want to move to the top, and below where you set the Hook is a Priority field, set this to 5"
Where do you find the "hook is a priority field"?
The "element type" for these two elements is set as "right sidebar" should I have it set for "hook" and then adjust the "hook name"?
Aah ok, easiest option would be to only use the one sidebar block element, and add both your 'widgets'. You can copy the blocks from one element to the other
thank you very much, that worked!
Glad to hear that!
