6 January, 2016 seen 2,769In this article you will learn how to make blocks on your Drupal site to float using a simple, and yet powerful module…
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
Feel free to drop a comment if you need any help.