[Resolved] Sticky Sidebar

Home Forums Support [Resolved] Sticky Sidebar

Home Forums Support Sticky Sidebar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1530647
    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.

    #1530910
    David
    Staff
    Customer Support

    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.

    #1530960
    Vishvendra

    Thank you David,

    I’ve done that part.

    #1531234
    David
    Staff
    Customer Support

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

    #1531689
    Vishvendra

    750px

    #1531958
    David
    Staff
    Customer Support

    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.

    #1532810
    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?

    #1532836
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.