Site logo

Archived topic

Sticky Side Bar doesn't work (if I use left & right side bar both)

5 replies · Started by Jinkwon on December 9, 2020

Viewing posts 1–6 of 6

Hi, Generate Press.

I am using CSS as below.
.inside-right-sidebar aside:last-child,
.inside-left-sidebar aside:last-child
{ position: sticky }

It works great if I use the right side bar only
https://www.oppadu.com/%ec%97%91%ec%85%80-%eb%ac%b8%ec%84%9c-%ec%b4%88%ea%b8%b0%ed%99%94-%ea%b8%b0%eb%8a%a5/

However, it does not work if I use the side bar left&right both.
https://www.oppadu.com/question/?uid=9026&mod=document&pageid=1

May I ask how I can solve it?
I want to make the last child of both side bar sticky.

Thank you!
Best regards,

Hi,

The CSS doesn't work on the other page because the .inside-right-sidebar and .inside-left-sidebar has a inline style of height: auto !important;.

Take a look at this: https://share.getcloudapp.com/8LunnOgX

This inline height style is preventing the inside sidebar wrappers from stretching its height to the content height meaning the sticky ad doesn't have vertical space to move around.

Hi, Elvin

Thank you for your kind advise and the video.
I looked at my page to edit the in-line CSS in '.inside-right-sidebar and .inside-left-sidebar', however I couldn't find the way to edit this.
I tried to add CSS code at CSS style with !important like below,

.inside-right-sidebar, .inside-left-sidebar { height: 100% !important }

However it seems the in-line CSS is prior than CSS file I wrote.

May I ask how I can edit the in-line CSS code at child-theme?

Thank you!
Best regards,

Hi there,

the inline style of height: auto !important; is not part of the Themes CSS. This is being injected by another plugin. Generally i see this when plugins that add pop-up modals or sticky elements such as Social shares do this.

You would need to eliminate which plugin is causing this by disabling one at a time.

If you can't do that then you would need to use a plugin like Sticky Anything.

Hi Generatepress

Thank you for your kind answer.
Problem has been solved.
I found out that Google Ads force to add 'Height: Auto! Important' style when the ads size is responsive. (it seems only specific size force to add it)

I fixed this issue as I changed the ad settings to fixed size.

https://support.google.com/adsense/answer/9183363

I hope this might help to others.

Thanks

Great to hear that - and thank you for sharing the solution!

This archived topic is closed to new replies.