Topic: Sticky sidebar won’t work anymore

Jim
February 8, 2024 at 1:57 pm
Hello, I ve looked eveywhere in here but I cant find a working CSS.

So I want the last widget of my right sidebar to be sticky.

This code here used to work, but not anymore…I dont know why.
```
.site-content {
  display: flex;
}	
.inside-right-sidebar {
  height: 100%;
}		
.inside-right-sidebar aside:last-child  {
	position: -webkit-sticky;
	position: sticky;
	top: 45px;
	bottom: 30px;
	padding-bottom: 83px;
} 
```
The thing is, if I try the following, then the whole sidebar stays sticky. So it does work then.
```
.inside-right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    
}
```
Any ideas why the first code doesn’t work at all?
You can see my page in the private info field.
Fernando
February 8, 2024 at 4:20 pm

Hi there,

Try replacing aside:last-child in your code with aside:last-of-type.

Let us know how it goes.
Jim
February 9, 2024 at 1:04 am
It works! So why did the code change?

Also do I need this piece of code if I am already using flexbox structure?
```
.site-content {
  display: flex;
	}
```
Cause I think it works without it too…
David
February 9, 2024 at 4:25 am
Hi there,

the :last-child psuedo-element requires ALL the elements to be the same type eg. <aside>.
However, Ezoic has injected a bunch of <ins> elements for its ad placement in there too. So it fails.
Hence the need to use :last-of-type as that can handle mixed content.

And this:
```
.site-content {
  display: flex;
}
```
You’re correct, is not required as the theme adds it.
Jim
February 9, 2024 at 8:57 am

Thanks so much for the explanation, David.

You guys are always so helpful and I appreciate it so much! 😊
David
February 9, 2024 at 11:21 am

I am so glad to hear that 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Sticky sidebar won’t work anymore