I tried to move layered navigation from left-side to top of the products.But Nothing displays When I changed the page layout from 2 column layout to 1 column layout then it shows only product list.


There are two ways to achieve this

  1. If you want it to be applied into a single category page only then perform following things

Go to your Admin_Panel > Catalog > Category > Desired_Category > Design Put there below things at appropriate places

Layout > 1 Column

Layout Update XML > <move element="sidebar.main" destination="content" before="-"/>

  1. To apply this to the entire categories just perform the below things

Just go to the below place


Create a file there with the name catalog_category_view.xml & put the below code there into that file & save it

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
       <move element="sidebar.main" destination="content" before="-"/>

Then reload your frontend category page you will see your required view there

Note: Do not forget to put your cache disabled or to perform the below command from your magento_root after doing this changes into your magento

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

Most Important -Never do changes into the core files of magento

  • fine. Now it is working.. – Satendra Tyagi Feb 12 '18 at 8:32
  • 1
    Hey @Satendra still facing any issue then let me know :) ! – Abhishek Tripathi Feb 13 '18 at 14:03
  • Currently, I have no issue if any then tell you. – Satendra Tyagi Feb 14 '18 at 15:39
  • Hi @ABHISHEKTRIPATHI I have the same problem I follow the steps but still not work for me. Can you please let me know how we can identify this element="sidebar.main" because when I check my theme I got this element="div.sidebar.main" but after using both still not work please help me – Rajan Soni Aug 23 '18 at 7:22
  • @SatendraTyagi element="sidebar.main" is the element from the Luma theme If you are not having the same element in your theme then may be some other element is replace with it just search there in your theme that element="sidebar.main" have remoe="true" somewhere? & any other element is place into its place – Abhishek Tripathi Aug 23 '18 at 13:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.