[Resolved] Left Sidebar is no longer sticky

Home Forums Support [Resolved] Left Sidebar is no longer sticky

Home Forums Support Left Sidebar is no longer sticky

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1572408
    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?

    #1572546
    David
    Staff
    Customer Support

    Hi there,

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

    #1572644
    André

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

    #1572720
    David
    Staff
    Customer Support

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

    #1572764
    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.

    #1572818
    David
    Staff
    Customer Support

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

    #1573001
    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.

    #1573113
    David
    Staff
    Customer Support

    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.

    #1573138
    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.

    #1573408
    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?

    #1573732
    Elvin
    Staff
    Customer Support

    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?"

    #1573863
    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é

    #1574997
    Elvin
    Staff
    Customer Support

    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?"

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.