Make Sidebar Sticky

Hi Lori,

I don't see the CSS being applied to the site.

Can you tell us how you've added it?

Here's the recommended way to add CSS - https://docs.generatepress.com/article/adding-css/

Hi Elvin! I added it using Appearance - Customizer - Additional CSS. I see it there in the customizer and I did publish and close out of the customizer and then went back in just now to double check and it's showing at my end.

Ah right. I see it now. My bad.

The CSS itself looks fine.

You can see on this test w/ devtools that its working - https://share.getcloudapp.com/Kou4YLqN

But it's quite difficult to check for syntax error as there's a lot in it.

Can you try temporarily moving ALL of the CSS and add only the sticky CSS code and see if it applies? This is to check for any potential syntax issues.

Okay I removed all the additional CSS except for the sticky sidebar code and it did work. So that means some other code I had in there was conflicting? Most of the code there was imported from the Dispatch theme. Any tips of what I should start with to narrow down the issue? Or should I just add back little bits of code one by one to see what is conflicting?

Or should I just add back little bits of code one by one to see what is conflicting?

Yes, that's a good way to find out the conflicts.

I would suggest checking the media queries @media first, see if there's a missing }

...just to add to the above, I'm adding bits of code back in already to see where the conflict is and I'll let you know. I'm glad you had me do this because I'm seeing how much extra code was in there that I wasn't using at all but was afraid to delete.

It seems to be something in this bit of code below that is conflicting with the sticky sidebar code:

/* WPSP Card Styling */
/* Add wpsp-card class to WPSP List shortcode wrapper */
.wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
}

:not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
margin-bottom: 0 !important;
}

.wpsp-card .wp-show-posts-inner {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.wpsp-card .wpsp-content-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 5% 8%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.35);
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}

.wpsp-card article {
position: relative;
overflow: hidden;
}

.wpsp-card article, .wpsp-card article .wp-show-posts-image img {
-webkit-backface-visibility: hidden;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}

.wpsp-card article:hover .wp-show-posts-image img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
color: #fff;

The code above is what makes my home page header look like the one in Dispatch so I would like to keep it. Is there a workaround to keep the above code and still have a sticky sidebar?

Thank you!

Not sure if it's missing when you copy paste, or it's actaully missing the } in the addtional CSS at the end of this code:

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
color: #fff;

It should be:

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
color: #fff;
}

Let me know!

I double checked, it is there in the CSS, I just must have left it out in the copy/paste.

So I checked your CSS file, and the } is missing after color: #fffin the actual file:
https://www.screencast.com/t/n6ImNo2lx

Hi Ying - Well shoot, you're right! I wasn't looking in the right place in the code. Weird that adding the closing bracket didn't seem to change anything else except it did fix the sticky sidebar thing. Thank you for your help!

You are very welcome Lori :)