The task was to add horizontal layered navigation on the category pages above the list of products. Every option in the filter has to be made as a column with scrolling option.
The element “div.sidebar.main” containing filters locates under the element “main” containing the products in Magento 2. Swap them at first. Add a xml- file <theme_dir>/Magento_Theme/page_layout/2columns-left.xml with the following content:
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <move element="div.sidebar.main" destination="columns" before="main"/> </layout>
Then customize the style of the element “div.sidebar.main” to make it spread horizontally for the full width. Do this using these CSS-rules:
- float: none;
- width: 100%;
The result will be smth like this:
Displaying layered navigation’s options as columns
Find the container with layered navigation (div element with the class “filter-options” in a standard package) and add the following CSS rule:
- display: flex;
You’ll get the image like this:
It isn’t the required result but I’ve got the layered navigation’s options displayed as a column above the list of products.
At the next step, it was decided to install the module Manadev_LayeredNavigation. After its installation the layered navigation’s options got this look:
Adding scrollbar to the layered navigation
The final step is to limit the columns height of layered navigation’s options and to add a scrollbar.
The simplest way to do this is to use CSS-rules. Add the following rule to every element containing the list of filters:
- max-height: 333px;
- overflow: auto;
You’ll get an image like this:
The next task was to customize scrollbar. Read more about this in my post Scrollbar customization in Magento 2
Magento Developer at Mobecls
6+ years of experience
Feel free to ask me anything about this post in the comments below