Floating Block

Online Support Service
1

Hello everyone,

I would like to make a block float ( be sticky when you scroll down) on the left sidebar. I found that Floating Block module implements that, but it doesn’t seem to work for me in D8 (Development version).

Do you have any stable solution to suggest me?

Thanks in advance,
Ioannis

2

Hello,

I figured out how to use Floating Block module and I would like to share a short documentation on what I did so far to implement it.

Blocks are great in sidebar, but floating ones (sticky while you scroll down) are even better. Let’s see how you can turn your block into a floating block in Drupal 8.

  • Install Floating Block module - Please note that is currently under development version, but it seems that works good enough
  • Go to the page that the block is appeared and use your browser Inspect element to identify block’s id and copy it in your keyboard. In our theme it will be probably inside the section tag e.g. <section id=“block-aboutoverview-2” … >
  • Go to Configuration → User interface → Floating block and paste the id in Floating block settings like this e.g. #block-aboutoverview-2. If you don’t add padding the floating block will look like not working because of the menu and that’s why you need to add the padding that works for your case. The final input should look like this e.g. #block-aboutoverview-2|padding_top=160
  • Extra tip: A floating block it doesn’t seem a good idea for mobile view. An easy way to avoid this it will be just to not appear it. If this works for you, go and make changes to CERN Override theme by adding the respective style to theme.css or creating a new css file. For example:
    @media screen and (max-width: 1000px) { #block-aboutoverview-2 { display:none; } }

I hope it will be somehow useful,
Ioannis Batas

1 Like