Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Sticky Widget CSS

  • 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

  • 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 πŸ™‚

  • 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

  • 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.

  • 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

  • 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 πŸ™‚

  • 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

  • HI there,

    I cannot see the white bar scrolling issue. Did you remove the second widget?

  • 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

  • Is it possible to fix this issue?

  • Do you only want the first widget to be sticky or do you want the entire sidebar to be sticky?

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

    Thanks

  • Then change this css:

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

    to

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

    Thankyou.

  • No Problem πŸ™‚

  • 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 28 total)
  • You must be logged in to reply to this topic.