[Resolved] Left Sidebar is no longer sticky

[André]

Hi,

I created a sticky left sidebar with the following CSS:

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

It worked fine. But I now realized that it somehow stopped working. However, I am unaware of what might have caused this. In the browser inspector, it still shows that the position is sticky. What am I missing?

[David]

Hi there,

can you disable you cache plugin so i can take a closer look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

I temporarily disabled the cache, but it breaks some pages. Weird…

[David]

Very odd… in Customizer > General can you switch the Structure to Flexbox. Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

Done. But besides some minor changes to the layout, it does not solve the issue. I cannot remember if I ever changed this setting, I believe it has always been Float.

[David]

Looks like something is interfering with the pages scroll behaviour. Can you try disabling the Progress bar ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

I turned off the progress bar, too. But it looks like the more I turn off, the more it adversely affects the page. No pages render correctly anymore. I needed to rebuild the pages so they look better now. But the sidebar remains nonsticky.

[David]

Do you have any cache plugins or server side caches enabled as disabling plugins shouldn’t ‘break’ stuff. The CSS for the sticky is correct so something else must be interfering with that property.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

OK, thanks. I am on the Litespeed server with the LS Cache plugin. Turning it off seems to cause trouble. I will check with my hoster if they can help identify the issue.

[André]

According to Closte support, everything should be fine now. I turned off any caching function, but the sidebar still is nonsticky. Do you happen to have another idea of what the issue could be?

[Elvin]

Hi,

I’ve checked your site and I see that you’re using simple CSS with this CSS in it:

html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}

Can you remove the overflow-x: hidden !important; line and check if the sticky works? Thank you.

Here’s a demo of it working if you remove it:
https://share.getcloudapp.com/z8u44y1q

A wise man once said:
"Have you cleared your cache?"

[André]

Hi Elvin,

Thanks a lot. That does the trick. I use the SimpleCSS on rare occasions only. Hence, I don’t know why the setting was there. I even tried to add overflow-x: visible to the sidebar container. But that won’t work.

I removed it from the place you identified, and now it works as it should. Thanks again, great support!

Best
André

[Elvin]

Thanks a lot. That does the trick. I use the SimpleCSS on rare occasions only. Hence, I don’t know why the setting was there. I even tried to add overflow-x: visible to the sidebar container. But that won’t work.

Tip: You can actually remove SimpleCSS and settle with just the Customizer’s Additional CSS and GP Premium’s Hook Element.

The alternative to having a page specific CSS with Simple CSS is creating a Hook element w/ your page specific <style></style> and set the display rule to the specific page you want the style applied. 🙂

No problem. Glad to be of any help.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts