Sticky side bar as per example

Hi there,

Create a new Block Element – Right Sidebar, switch to Code Editor and paste this markup:

<!-- wp:generateblocks/headline {"uniqueId":"96b0cc08","element":"h4","blockVersion":3,"flexBasis":"100%","iconColor":"var(\u002d\u002daccent)"} -->
<h4 class="gb-headline gb-headline-96b0cc08 gb-headline-text">Most popular</h4>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/query-loop {"uniqueId":"1a2b8d01","query":{"post_type":"post","per_page":"6"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"ca33760c","columns":1,"verticalGap":10,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"useLegacyRowGap":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"5c7c4cab","isGrid":true,"isQueryLoopItem":true,"gridId":"ca33760c","isDynamic":true,"blockVersion":4,"display":"flex","flexDirectionTablet":"column","flexDirectionMobile":"row","columnGap":"20px","rowGapTablet":"10px","sizing":{"width":"100%","height":"100%","maxWidth":""},"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"3df7c017","isDynamic":true,"blockVersion":4,"flexShrink":0,"flexBasis":"80px","sizing":{"width":"","widthTablet":"66.66%","widthMobile":"50%","height":"","maxWidth":""},"typography":{"textAlignTablet":"left"}} -->
<!-- wp:generateblocks/image {"uniqueId":"92236877","sizeSlug":"thumbnail","width":"80px","height":"80px","objectFit":"cover","blockVersion":2,"borders":{"borderTopRightRadius":"50%","borderBottomRightRadius":"50%","borderBottomLeftRadius":"50%","borderTopLeftRadius":"50%"},"useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"3d6aadc7","verticalAlignment":"center","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","justifyContent":"center","flexShrink":1,"sizing":{"width":"","widthTablet":"100%","widthMobile":"50%","height":"100%","maxWidth":""}} -->
<!-- wp:generateblocks/headline {"uniqueId":"5de65b61","element":"h6","blockVersion":3,"typography":{"fontSize":"12px"},"spacing":{"marginBottom":"8px"},"useDynamicData":true,"dynamicContentType":"terms","termTaxonomy":"category"} -->
<h6 class="gb-headline gb-headline-5de65b61 gb-headline-text"></h6>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"1cf7ebe2","element":"h3","blockVersion":3,"typography":{"fontSize":"15px"},"spacing":{"marginBottom":"5px"},"useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h3 class="gb-headline gb-headline-1cf7ebe2 gb-headline-text"></h3>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

That should give you the layout like the example you provided.

Once that’s done, we can add the sticky feature afterward.

Give this CSS a shot:

@media (min-width: 769px) {
    .single .inside-right-sidebar {
        position: sticky;
        top: 70px;
    }
}

Learn how to add CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

I just checked your sidebar, and it looks like the sticky effect is already applied.

I initially thought you wanted the sticky sidebar to apply only on single posts. If that’s the case, modify Leo’s CSS above to this:

@media (min-width: 769px) {
    .inside-right-sidebar {
        position: sticky;
        top: 70px;
    }
}

You’re welcome!