-
Hello,
How to make the “before_right_sidebar_content” hook sticky?” Should I use the element as “sidebar” or the hook of “before_right_sidebar_content”? I guess they have the very similar purpose in this case.
Screenshot: https://postimg.cc/gallery/tHZsxqf
Thank you in advance!
-
Hi there,
You can use some CSS for this. Or, if you’re using GenerateBlocks Pro, you can use a Global Style.
If you’re using CSS, you can:
1. Give the element a class. For example:
my-sticky-element
2. Add the CSS to your website:.my-sticky-element { position: sticky; top: 0; }If you’re using Global Styles in GenerateBlocks Pro, you can:
1. Create a new Global Style. For example:
my-sticky-element
2. In the “Position” panel, set the “Position” to “sticky”, and set the “Top” value to 0.Let us know if this helps or not 🙂
-
Hello Tom,
I tried your first way to add some CSS, I think I didn’t do anything wrong and I am familiar with this process. However, it didn’t work..
Can you help me check if there is one step that I didn’t follow correctly?
The screenshot is here: https://postimg.cc/gallery/qKhc0fm
Thank you a lot!
-
It looks like you did all right.
Can I see your site where I can see the element?
Let me know 🙂
-
Hello Ying,
I put the link in the private information field. It’s the right sidebar called “Related Posts” on the post page. Do you need the privilege to my wp-admin to have a look? I can do that if you need it.
Screenshot: https://postimg.cc/vcXCq99f
-
Try adding this CSS as well:
.inside-right-sidebar { height: 100%; } -
It works! Thank you so much, Ying. The second code can’t be missed? Although I have created the new CSS class fo the element. It seems the second part can’t be missed, can you give an explanation why both codes can’t be missed? I want to resolve similar issue on my own end in the future.
Thank you a lot for kindly help! And I just want to say: GP’s support is just awesome and amazing, I can even get reply at the weekend!
-
Hi there,
Could you clarify what you mean by the “second code”?
-
Hello Alvind,
.inside-right-sidebar { height: 100%; }These code provided by Ying
-
Yes, that code is required to set the sidebar to full height, ensuring that the sticky element has enough space to stick when the page is scrolled.
-
Tom taught me to give the CSS class a name for the element and add some CSS codes. I thought it will work. The code provided by Ying is a must-have code, otherwise it can’t be displayed and I tested it. What’s the meaning of the second code because I thought the first code was the whole process to make the element sticky.
“.inside-right-sidebar”, for this CSS class name, I don’t even create it, but it works. So that makes me a little bit confused.
Anyway, I just want to figure out why the first code didn’t work…
Gotta learn some codes
-
The
inside-right-sidebarclass is a default class name assigned to the sidebar by the theme, so you don’t need to add this class manually. What the ‘second code’ does is add an additional CSS property to ensure it behaves according to our use case.It all makes sense once you grasp the fundamentals of CSS 🙂
-
Thank you for your explanation, Alvind.
I actually learned some codes last year, but just some very basic codes, it’s about container’s position and display mode. I think I need to learn a lot more so that I can resolve the issue by myself. Last week, I asked several questions on the GP forum which makes me feel embarrassed for bothering you a lot.
Thank you again!
-
You’re welcome! And don’t feel that way—we’re glad to be of help.
- You must be logged in to reply to this topic.