Archived topic

How to keep left side bar sticky

9 replies · Started by Winnie on August 22, 2020

Viewing posts 1–10 of 10

August 22, 2020 at 2:46 am #1413598

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

August 22, 2020 at 8:59 am #1413972

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;
}

August 24, 2020 at 4:18 am #1415828

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

August 24, 2020 at 4:37 am #1415849

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;
}

August 25, 2020 at 5:05 am #1417277

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

August 25, 2020 at 6:14 am #1417338

I changed the CSS here:

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

Please try that instead

August 29, 2020 at 10:30 am #1423220

Hi David,

The latest code is working now, thank you!

Best,
Winnie

August 30, 2020 at 12:22 pm #1424260

You're welcome

August 31, 2020 at 3:17 am #1424787

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

August 31, 2020 at 5:03 am #1424890

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.

This archived topic is closed to new replies.

Start building better websites today.