[Resolved] The Right sidebar overlays on top of the left sidebar on mobile.

[Onur]

Thanks, I will try. Btw, I tried solutions here for GP but to make the left or right sidebar sticky is not worked. How can I make for example left siderbar widgets (all) stick?

https://www.wpglossy.com/wordpress-sticky-sidebar/

[Onur]

Hi Ying, this solution as I see not responsive especially google ads it may create overlaps?

[Ying]

You need to add media query like David and Elvin’s CSS, so the sticky only works on desktop:@media(min-width: 769px)

[Onur]

Literally, I could not solve this problem. 🙂 Frankly speaking, making a thing sticky should not be tough.

Why below code is not working?

@media(min-width: 769px) {
    .site-content {
        display: flex;
    }
    .inside-left-sidebar {
        height: 100%;
        min-height: 100%;
	position: sticky; 
        position: -webkit-sticky;
        top: 60px;
    }
}

I cannot make the sidebar sticky. Left or right does not matter.

[Onur]

I tried that one before David’s posted it. The problem again even on a desktop it creates problems. I am working with a laptop + a big monitor. On the laptop, the ads are showing rectangles and long, on the big monitor because of responsiveness they are becoming square.

[Onur]

I tried the things which David shared here: https://generatepress.com/forums/topic/how-to-make-the-sidebar-static/

No luck. 🙁

[Ying]

If you want the entire sidebar sticky, you don’t need to make widget sticky one by one.
Try this:

@media (min-width: 769px) {
 .inside-left-sidebar {
    position: sticky;
    top: 100px;
}
}

[Ying]

How about you tell us what exactly you want?

Entire left sidebar sticky?

And which widgets of right sidebar to be sticky so we can write the exact CSS to solve your problem?

[Onur]

Yeap. The left-sidebar is worked perfectly. 🙂

I will now check, your other solution about making any widget sticky and also responsive. If I cannot solve it, I probably merge two ads in one widget with a space. Currently, the right-sidebar is like that. I am doing some trials. 🙂

Thanks a ton for the prompt replies Ying! 🙂

[Ying]

No problem 🙂

Keep us updated!

[Onur]

Right now, I just merged the google ads in one widget and used below CSS.

I do not know what kind of solution did they do for the below plugin?

https://wordpress.org/plugins/q2w3-fixed-widget/

Before, I was using it, and whenever I set a widget sticky with a checkbox after that widget the rest of the elements also getting sticky. Your solution in your previous reply worked but as I said it is not a responsive solution.

The thing is if I can calculate the one level up element’s size and automatically calculate the second element’s top pixel value then it will be responsive. But I do not know how to do it in CSS. 🙂

[Ying]

The plugin uses JavaScript.

The CSS solution will need to calculate manually.

You now have 2 ads in the last widget of right sidebar, it seems working fine.

Can you add all the ads in so I can see if I can get the height of each one?

[Onur]

Yes, I was thinking the same about JavaScript usage. Currently, I have two ads and it is working fine. I think with CSS we can achieve this. Right now it is fine Ying. If I need extra help, I will let u know. Thank you so much. Also, I have checked the page speed score. Disabling the plugin increased some metrics.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Fxpath-selenium%2F&tab=desktop

Thank you! 🙂

[Ying]

You are welcome!

JavaScript slows site down that’s for sure 🙂

[Author]

Posts