[Resolved] Sidebar elements intrude footer

[Drew]

Hi, I have a problem when scrolling down the page, if I have a sidebar element that is set as a fixed element, it will intrude the footer. Is there a way to prevent it from doing that?

[David]

Hi there,

are you using code or a plugin to make that widget sticky ?
As that is using Javascript to fix the sidebars position, so stopping that from happening is not easy.

If you can remove whatever it is you’re using to make it stick, and ill provide a pure CSS method that will fix the issue.

[Drew]

Hi David, yes I am using a plugin called “fixed widget”.

[David]

Are you only using that for the last widget in the right sidebar ?
If so can you disable it ?

[Drew]

That’s correct, it’s just for the last widget. Disabling now.

[David]

Try adding this CSS:

@media(min-width: 769px) {
    .site-content {
        display: flex;
    }
    .inside-right-sidebar {
        height: 100%;
    }
    .inside-right-sidebar :last-child {
        position: sticky;
        top: 150px;
    }
}
/* adjust sticky top on larger screens */ 
@media(min-width: 1070px) {
    .inside-right-sidebar :last-child {
        top: 100px;
    }
}

The top value is what sets how far from the top of the viewport the widget will stick.
The first value covers the taller header on smaller screens.

[Drew]

Thanks David. Will this apply to the entire site? Some posts have a custom sidebar.
Also, best way to add this CSS? I don’t believe I have any CSS on the site yet.

[David]

That CSS will apply everywhere – how do you know which posts have a different sidebar ? Do they have a specific taxonomy or something ?

[Drew]

I use a plugin called Content Aware Sidebars that allows me to make a custom sidebar for specific pages. I have about 10 pages with a custom sidebar.

[David]

Ok,

1. In Appearance > GeneratePress, activate the Elements module.
2. In Appearance > Elements -> Add New Hook Element.
2.1 in the hook text area add:

<style>
@media(min-width: 769px) {
    .site-content {
        display: flex;
    }
    .inside-right-sidebar {
        height: 100%;
    }
    .inside-right-sidebar :last-child {
        position: sticky;
        top: 150px;
    }
}
/* adjust sticky top on larger screens */ 
@media(min-width: 1070px) {
    .inside-right-sidebar :last-child {
        top: 100px;
    }
}
</style>

2.2 Set the Hook to: wp_header
2.3 Set the Display Rules > Location to Post > All Posts.
2.4 Set the Display Rules > Exclusions to the post you DON’t want a sticky widget on.**
2.5 Publish the element.

** Note this is only required if they are Posts, don’t bother if they are Pages.

[Drew]

Thanks David, that worked perfectly!

[David]

Glad to hear that!!

[Author]

Posts