Help me sticky sidebar in blogs post

Shopify Discussion

Topic summary

A user is experiencing issues implementing a sticky sidebar on their blog posts using CSS position: sticky, which isn’t functioning as expected.

Proposed Solutions:

Two community members offered similar CSS-based fixes:

  • PageFly-Richard suggests adding custom CSS to the styles.css file
  • Alok_Kasgar recommends inserting CSS code into the theme.liquid file within <style> tags before the closing </body> tag

Both solutions include CSS targeting specific elements (breadcrumb navigation and a template section) with properties like position: fixed, z-index: 9999, and top: 20%.

Note: The provided code snippets appear to use position: fixed rather than position: sticky, which creates different scrolling behavior. The discussion remains open pending confirmation whether these solutions resolve the original issue.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

I want sticky sidebar in my blog posts but why when I use position: sticky attribute for it but it doesn’t work can someone take a look please help me please

Link: https://heliosjewels.vn/blogs/tin-tuc/nhiem-trung-lo-xo-tai

2

HI @kinzen509

This is Richard from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file → Save

div#shopify-section-template–16676923474141__main {

margin-top: 80px;

}

nav.breadcrumbs {

position: fixed !important;

z-index: 9999;

top: 20%;

width: 100%;

background: black;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

3

I hope this solution will works. feel free to text me back if you have any question.
Please follow below steps

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag
div#shopify-section-template--16676923474141__main { margin-top: 80px; } nav.breadcrumbs { position: fixed !important; z-index: 9999; top: 20%; width: 100%; background: black; }