Sticky not working

I am adding a vertical navigation column on the right side on my blog page. i want the navigation to be sticky. i tried it in the editor preview it works fine but it stops working on the live website. right now i have changed it to fixed position but that is also not working well. my blog pages are dynamic. on some pages fixed position works on some it doesn’t.
With fixed the problem is that if there are navigation links beyond a certain height they don’t show. I would like to have a way to get “sticky” working

My project id is
https://studio.plasmic.app/projects/gCxVELPwTu5zZZZy2kmhNR

Hello @bhavna_dresma, I can’t see the vertical navigation on the right side of the blog page. Can you share some screenshots of the issue you are facing so I can investigate further.

Please check the url
https://www.domyshoot.com/blog/amazon-product-photography

here i have used “fixed” as sticky was not working. but because the position is fixed i am not able to view the full menu

I see these styles on your body tag:

body, html {
    padding-top: 48px;
    max-width: 100%;
    overflow-x: hidden;
}

These don’t look like something that Plasmic would add (I think!). Its the overflow-x: hidden that’s causing the sticky to not work. If you remove it, sticky should work fine.

This particular block of CSS is located in https://www.domyshoot.com/_next/static/css/23c500732486683ca449.css. Do you have any ideas on where this is coming from? Is it a custom CSS file you have in your project?

I use plasmic with codegen and found this in my global.css in different projects so i think it’s added by plasmic:

html,
body {
max-width: 100vw;
overflow-x: hidden;
}

You can easily fix it by using the embed css feature (add it to project if its not there in project settings) and add this:

html,body {
overflow-x: unset;
}