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.

GeneratePress GenerateBlocks

Sticky column in Grid

  • Max
    June 11, 2024 at 2:15 am

    Hello,

    I tried to follow some tutorials like here and there but I’m sorry it still isn’t working and I don’t understand why.
    In the private box you can find a URL with a grid and I let the different classes in the different containers to help.

    Could you please help me ? And if possible, could it stay sticky when reaching the center of the screen when scrolling.

    Thank you

  • David
    June 11, 2024 at 3:03 am

    Hi there,

    for illustration lets assume you have a 2 column grid:

    
Grid Block
---- Container Block #1 ( left column )
---- ---- Container Block #1.1 for sticky content
---- Container Block #2 ( right column )
---- ---- Other content.

    1. make sure the Grid Blocks vertical alignment is set to Default
    This will make both columns Container Block #1 and #2 a Height of 100%

    2. select Container Block #1.1 for the sticky content.
    2.1 Create a new Global Style:
    https://docs.generateblocks.com/article/creating-a-global-style/

    Call it is-sticky for example
    Start with a Blank Style

    2.2 in the global styles Position panel , set the Position to Sticky and then the Top to 0 or any value eg. 50px.
    The value add will determine the space above it when its sticky.

    3. Update the post to save the Global Style.

  • Max
    June 11, 2024 at 3:29 am

    Thank you David I’ll get to know more about the Global Style as I don’t use it a lot.
    Unfortunately for the website I’m working on I don’t have GenerateBlock Pro, just the GeneratePress Premium.

    Would it be possible to use CSS please ? In the private box I added an URL for the image to check if this is correct

    1. make sure the Grid Blocks vertical alignment is set to Default

    Thank you

  • David
    June 11, 2024 at 3:32 am

    The same setup, but instead of adding the global style do this:

    1, select Container Block #1.1 and in Advanced > Additional CSS Classes just add is: is-sticky

    2. then add this CSS to your site:

    
.is-sticky {
    position: sticky;
    top: 0;
}

    Make sure to clear any caches afterwards

  • Max
    June 11, 2024 at 4:16 am

    I found out the problem. So I was doing it right since the beginning but I tried on 2 different websites and it wasn’t working because I have this CSS which apparently was blocking the sticky to execute

    html, body {overflow-x: hidden;}

    Edit : I added @media (max-width:768px) to it and now the sticky is working on computer screen

    Thank you

  • David
    June 11, 2024 at 4:41 am

    Ah yes, the html, body {overflow-x: hidden;} will break sticky position.
    Glad to hear you got it working.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.