Archived topic

Sticky Sidebar

5 replies · Started by Anirudh on July 26, 2021

Viewing posts 1–6 of 6

July 26, 2021 at 4:49 am #1871227

Hi there,

I am unable to make the last widget of my right sidebar sticky. These are the solutions I have tried:-

1. Using the following CSS in the customize section:-
@media (min-width: 769px) {
.site-content {
display: flex;
}

.inside-right-sidebar {
height: 100%;
}

.inside-right-sidebar aside:last-child {
position: -webkit-sticky;
position: sticky;
top: 70px; /*Adjust position */
}
}

2. Using the Q2W3 Fixed Widget Plugin

Ideally I would like to accomplish the task without a plugin.

Thanks for your time and help,
Anirudh.

July 26, 2021 at 6:48 am #1871361

Hi there,

can you share a link to your site where i can see the sidebar

August 5, 2021 at 2:12 am #1884578

Hi David,

Sorry for the delay in reply. I didn't get a message on my mail. Here is a link to one of the many posts on which I want to implement the sticky sidebar:-
https://learnodo-newtonic.com/batman-facts.

Thanks for your time and help,
Anirudh.

August 5, 2021 at 4:08 am #1884702

The link you provided, the sidebar content is as long ( longer ) then the post content. Which doesn't really work with making the last widget sticky as it would never be scrolled to the top of the screen....

August 6, 2021 at 1:32 am #1885856

Hi David,

Thanks for your reply. The sidebar doesn't stick even when the post is very long. For example this url: https://learnodo-newtonic.com/oprah-winfrey-achievements.

Looking forward to your reply,
Thanks for your time and help,
Anirudh.

August 6, 2021 at 5:53 am #1886042

You have this CSS in the Customizer > Additional CSS:

html, body {
    overflow-x: hidden;
}

Position sticky will not work if any parent container has overflow set to hidden or scroll.
So you would have to remove that CSS for it to work.

This archived topic is closed to new replies.

Start building better websites today.