Floating Block for Drupal 8

| Drupal Development | 4 seen

The Floating block is a nice helper module which allows you to keep HTML blocks, selected using jquery selectors in a fixed position on the page as you scroll. I've been using Floating block mostly for my personal blog to feature related content (you can see floating module while browsing this web page from a desktop computer.)

In fact, I stop using floating block module  a couple of years ago, but recently I was contacted by another Drupal webmaster, regarding my tutorial on Floating Block module for Drupal 7 site and taking a fresh look at this module, I understood - Floating block module helps UI by filling up sidebar, so it's never empty. 

When speaking about Floating block module for Drupal 8, there is not yet a stable release (as of writing this), but there is a dev version, which actually works out of the box.

Configure Floating Blocks for Drupal 8 website

As usual, let's start with download

  • Download and enable floating block module
  • Configure floating block from admin/config/user-interface/floating-block

In my example, I'm looking to make one block from the right sidebar to float.

Using inspector tool (Chrome CTRL+Shitf+I) find div (#) id element you are looking to make floating, in my case: #block-views-block-tours-block-2

To float the left sidebar within a container in your theme us selectors, for bootstrap: container=.main-container

Here is complete configuration for floating block configuration

#block-views-block-tours-block-2|container=.main-container

Feel free to drop a comment if you need any help.

Add new comment