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.

Creating a Sticky Sidebar type block

  • Hey…

    On this, there’s a content part in the middle of the page and next to the content, there’s a sticky contact form built.

    That contact form is sticked only to that content part of the page when scrolled.

    Can we do the same with GeneratePress? And How?

  • Hi there,

    Yes, it’s possible.

    Create a 2 column grid Block first: https://docs.generateblocks.com/article/grid-overview/

    Once you’ve created this and added your content, let us know so we can provide you with the CSS needed.

  • Hey…

    I’ve put the grid and the content inside them. And I want only this red marked white container to be sticked throughout the content part when scrolled.

  • Hi there,

    that section you added with the grid, in its Layout options set the Overflow X and Y back to Default. They cannot be hidden.

    Then inside the Grid Block select the Right Column container and remove its Overflow settings too.

    Finally select the Container Block inside that columns Contained and in Advanced > Additional CSS Class(es) add: is-sticky-top

    Save those changes

    Then add this CSS to your site:

    
    .is-sticky-top {
        position: sticky;
        top: 60px;
    }
    
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.