Position: sticky;

I want to make a side bar sticky but the css “position:sticky” don´t work.

can you help me?

Hey Hugo! Welcome to the Unbounce Community by the way! :smiley_cat:

Sorry for the delayed reply! Would you be able to share the code you’re working with so I can help you out a bit more?

1 Like

Hey, thank you by the welcome.

The code i tried is this:

#lp-pom-box-12 { position: -webkit-sticky; /* Safari */ position: sticky; Top:30px; }
1 Like

Hey @Hugo_Ribeiro

I see that my colleague Vicky asked you about the code you were working on and it wasn’t working.

I was able to implement the css sticky on this test page here: http://tst.brunagarcia.tk/stickyelement-community-service/
by using the same code as you sent previously, however there are some catches when trying to implement the sticky position to this element.

First of all, you should make sure your sticky element has a box element as parent. Because the sticky position should be applied on a child of an absolute position element, if you just have the sticky element on the root of your Unbounce page, it seems like it won’t work.

Then there are a few edits on the code you sent that helped me to make it work:

1- The top word, should be in lower case, so CSS will understand that this is the breakpoint for your sticky element.
2- Since you will be overwriting the default position of this element, you can add the !important word after your style, so the browser will prioritize this style. (We don’t recommend using !important in many elements, otherwise, the styles can conflict).

Hope this works for you. :smile:

1 Like