Topic: Sticky Widget CSS

richib
March 30, 2024 at 10:25 am

Hi,

I’ve tried various plugins for making a sticky widget in my right side bar, but none seem to work.
I was wondering if there a CSS way round this?
Or, if you could tell why no plugin I try seems to work?

Many Thanks
Leo
March 30, 2024 at 4:59 pm
Hi there,

Give this CSS a shot:
```
@media (min-width: 769px) {
    .inside-right-sidebar {
         height: 100%;
    }
    .sidebar .widget {
        position: sticky;
        top: 0;
    }
}
```
Learn how to add CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂
richib
March 31, 2024 at 12:30 am

Hi,

Works perfectly 🙂

Is there a way to add some padding / white space above? (When the text hits the top)

Also, I have tried to change the appearance via the plugin style sheet but nothing seems to work.
I don’t know if it’s just me not being very good 🙂 or a conflict with generatepress (or both)
I’d like it to look something like this:

https://github.com/cabrerahector/wordpress-popular-posts/wiki/6.-Styling-the-list#card-style

How would I do this?

Thanks
Leo
March 31, 2024 at 10:57 am

Is there a way to add some padding / white space above? (When the text hits the top)

You can edit the top: 0; to something like top: 20px; to adjust the position.

Is the content coming from this plugin?
https://en-ca.wordpress.org/plugins/wordpress-popular-posts/

If so, have you tried checking with the plugin’s support team to see how to implement further style customization?

All the styles I see are coming from the plugin itself and not from the theme.
richib
April 1, 2024 at 11:08 am

Hi,

I have added a second widget under the popular posts widget, and when scrolling, the second widget content scrolls through the first widget content..
Do I need extra CSS to stop this happening?
I’ve have removed the second widget for the time being, as it looked horrible, so unfortunately there’s nothing for reference.

Thanks
Ying
April 1, 2024 at 12:19 pm

I will have to see the issue to determine what caused the issue.

Any chance you can add it back and point me to where I should be looking at?

Let me know 🙂
richib
April 1, 2024 at 12:49 pm

Hi, I’ve added a blank short code widget underneath popular posts.
You can see a white bar scrolling through the popular posts widget.

Thanks
Alvind
April 1, 2024 at 6:36 pm

HI there,

I cannot see the white bar scrolling issue. Did you remove the second widget?
richib
April 2, 2024 at 6:31 am

Hi,

I have a text widget with 3 X’s under the popular posts widget.
You can see the xxx scrolling through the first widget content.

Thanks
richib
April 2, 2024 at 9:09 am

Is it possible to fix this issue?
Ying
April 2, 2024 at 9:16 am

Do you only want the first widget to be sticky or do you want the entire sidebar to be sticky?
richib
April 2, 2024 at 9:23 am

Hi, the entire sidebar if possible.. without the 2nd widget scrolling through the first.

Thanks

Ying

April 2, 2024 at 10:23 am

Then change this css:

  /*Sticky Side Bar*/
            @media (min-width: 769px) {
                .inside-right-sidebar {
                   height: 99%; 
                }

                .sidebar .widget {
                    position: sticky;
                    top: 100px;
                }
            }

  /*Sticky Side Bar*/
            @media (min-width: 769px) {
                .sidebar .inside-right-sidebar {
                    position: sticky;
                    top: 100px;
                }
            }

richib
April 2, 2024 at 10:35 am

Perfect 🙂

Thankyou.
Ying
April 2, 2024 at 10:47 am

No Problem 🙂
richib
April 2, 2024 at 12:06 pm

Do I need to add this from the original code?

height: 99%;

It stops the sidebar from running over the footer on tablet view.

Thanks

Viewing 16 posts - 1 through 16 (of 34 total)

1 2 3 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Sticky Widget CSS