How can I make a block in Brizy Cloud sticky?

Tony Rockliff

• December 08, 2019 17:21
• Edited

Hello, how can I make a block in Brizy Cloud sticky? I tried naming its class sticky-top and using this CSS, but it doesn't work:

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

}

0

• 

  Bogdan Condurache

  • December 09, 2019 13:34
  • Edited

  Hello Tony, you can make a header block sticky by opening the Block options, and pressing the left-hand side icon to get to it. Just like in this screenshot: https://jmp.sh/xCXFxfx - and basically you can design anything you want in that block (with all the elements and tools available in Brizy). But it only works with header block types, which you can add from the Blocks adder popup.

  0
• 

  Aaron Boddy

  • February 11, 2020 19:32

  He basically telling you. that the standard CSS doesnt work and that you have to pay for such a simple feature 

  0
• 

  Alex

  • February 12, 2020 08:54

  Hey Arron,

  Basically, Bogdan tells you that you are free to use your inventiveness and to use the header block as a simple block, so you can have a sticky section.

  At the moment there is no option to make a sticky section, but with some inventiveness, you can "overcome" this limitation. We do not offer custom paid work on Brizy, so there is no intention of "you have to pay for such a simple function".

  btw: we have this on our to-do list so you'll soon have such an option in Brizy Builder.

  0
• 

  Harry K.

  • May 09, 2022 20:07

  The problem with sticky is nested div's. A block is always nested with brizy because the page is wrapped in a div with the ID mm-0. Now if the parent div has an overflow:hidden then sticky won't work. To solve this you also need to add this code to your page / website:

  #mm-0 {

  overflow-x: visible !important;

  overflow-y: visible !important;

  }

   

  and this css code to your block:

   

  #sticky-div  {

  position: -webkit-sticky !important;

  position: sticky !important;

  top: 0px !important;

  }

   

  where sticky-div is your block name in the advanced tab of your block settings

  1
• 

  Permanently deleted user

  • May 10, 2022 10:01

  Hi Harry,

  Thank you for sharing this information with us.

  Best regards, Nelea.

   

  0

Please sign in to leave a comment.