[Resolved] How to keep left side bar sticky

[Winnie]

Hi, I tried implementing your CSS, but it’s not sticky. https://generatepress.com/forums/topic/sticky-left-sidebar-and-styling-without-plugin/

Can you help me take a look at what went wrong?

Thank you so much!

Best,
Winnie

[Leo]

Hi there,

Can you try this instead?

.both-sidebars #left-sidebar .inside-left-sidebar {
    height: 100%;
}
.both-sidebars #left-sidebar .inside-left-sidebar .widget_nav_menu {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
}

[Winnie]

Hi Leo, I have tried your code, it’s not working.

[David]

Hi there,

try this CSS:

.site-content {
    display: flex;
}
.site-content > div {
    left: unset !important;
}

#left-sidebar {
    order: -1;
}

#left-sidebar .inside-left-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
}

[Winnie]

Hi David, I have inserted your code, it is not working.

[David]

I changed the CSS here:

https://generatepress.com/forums/topic/how-to-keep-left-side-bar-sticky/#post-1415849

Please try that instead

[Winnie]

Hi David,

The latest code is working now, thank you!

Best,
Winnie

[David]

You’re welcome

[Walter Schwarz]

Hi,

the code works perfectly. But it does not with my #breadcrumbs positioned on top and across all three columns of the content area. Any solution for this?

https://drwjs.com

Cheers

[David]

Hi there,

your site URL is reporting 502 bad gateway.

Can you fix that and create a new topic where we can look at your issue.

[Author]

Posts