[Resolved] Sticky Sidebar

[Vishvendra]

Well, I tried almost all the points shared in the support channel, But unable to make the sidebar sticky. I have used the Recent Posts with Thumbnails plugin to display the posts as suggested by Leo.

And used this code to adjust post width and sidebar’s ->

@media(min-width: 1100px) {
.right-sidebar.single-post .is-right-sidebar {
position: absolute;
max-width: 280px;
left: calc( ((102vw – 1200px) / 2) + 950px);
top: 11.1em;
}
.right-sidebar.single-post #primary {
width: 100%;
}
}

@media(max-width: 1100px) {
.right-sidebar .site-content {
flex-direction: column;
}
.right-sidebar .site-content .content-area,
.right-sidebar .is-right-sidebar {
width: 100%;
}
.right-sidebar #main {
margin-right: 0;
}
}

Here’s the link

I want the sidebar to be sticky.

[David]

Hi there,

you cannot use position: absolute; and then make the element sticky without using Javascript.
Instead remove the CSS you have added, and set the Customizer > General -> Structure to Flexbox. Once you have done that i’ll take a look at the CSS required to provide that layout and the sticky sidebar.

[Vishvendra]

Thank you David,

I’ve done that part.

[David]

Whats the maximum width of the Primary Content area you will want to display ?

[Vishvendra]

750px

[David]

Try this CSS:

@media(min-width: 1100px) {
    .single-post.right-sidebar .site.grid-container {
        max-width: 1100px;
    }

    .single-post.right-sidebar #primary {
        max-width: 750px;
        margin-left: auto;
    }
.single-post.right-sidebar .is-right-sidebar {
        max-width: 240px;
        margin-top: -50px;
    }
    .single-post.right-sidebar .is-right-sidebar .inside-right-sidebar {
        poisition: -webkit-sticky;
        position: sticky;
        top: 20px;
    }
}
@media(max-width: 1099px) {
    .single-post.right-sidebar #content {
        flex-direction: column;
    }

    .single-post.right-sidebar #primary {
        width: 100%;
    }

    .separate-containers.right-sidebar .site-main {
        margin-right: 0;
    }

    .single-post.right-sidebar .is-right-sidebar {
        max-width: unset;
        width: 100%;
    }
}

@media(min-width: 1250px) {
    .single-post.right-sidebar .site.grid-container {
        max-width: 1250px;
    }
}

On screen sizes over 1250px it will keep the primary content centered, below that the content shifts to the left to maintain the space required for the 240px wide sidebar. Then at 1100px the content / sidebar stacks.

One issue is that the full sticky sidebar means the bottom content of the sidebar will not be visible until the user scrolls to the end of the post on shorter screebs.

[Vishvendra]

Added the CSS but made some changes to the margin top,

.single-post.right-sidebar .is-right-sidebar {
        max-width: 240px;
        margin-top: -50px;

-50px was putting the sidebar over navigation. So, I simply modified it to

0px

Is it right?

[Elvin]

Is it right?

Yes that’s correct.

And if you want to move the sticky sidebar further down while it’s sticky, you can use the top attribute.

Example:

top: 50px; adds 50px space between the sticky sidebar and the top of the viewport when you scroll. 🙂

[Author]

Posts