Mobecls Magento development company
[email protected]
+37 525 944 33 88      

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:

horizontal layered navigation magento 2

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:

Column layered navigation in Magento 2

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:

Horizontal layered navigation with columns

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:

layered navigation scrollbar

The next task was to customize scrollbar. Read more about this in my post Scrollbar customization in Magento 2

Menu