Prestashop vertical dropdown categories menu

How to Show the Prestashop Vertical Dropdown Categories Menu from Horizontal

When you install Prestashop, the default theme has a horizontal sub-menu. Many users using the classic theme and want to change the horizontal sub-menu to the vertical sub-menu. In this article, I will discuss the easy way you can change the horizontal categories to a Prestashop vertical dropdown categories menu.

Prestashop vertical dropdown categories menu

Prestashop Vertical dropdown categories menu from Horizontal menu

There is two ways that you can convert the Prestashop vertical dropdown categories menu.

  1. From the code. 
  2. From the Addon. 

From the code:

  • Log in to your hosting from where you have installed your prestashop store.
  • Go to /themes/classic/assets/css/custom.css
  • Edit the custom.css
  • Copy the below code and paste it in custom.css.
  • Save the code.
Now browse your site. You will see the changes
Prestashop vertical dropdown categories menu
					.top-menu .sub-menu {
    box-shadow: none !important;
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
    top: 72px !important;
#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;

From the Addon:

If you feel difficulties with code or you want to change this by Addon,  then you have the better option from Prestashop back office. You can download the Classy Custom CSS & JS module FREE.

After finishing the download: 

  • Log in to your back office. 
  • Go to Improve > Module > Module Manager > Upload a module.
  • Configure classydevs custom CSS and JS > Enable JS > Yes > Paste the code in inseted area > save
Prestashop vertical dropdown categories menu

You can customize the dropdown menu if you know the basics of HTML CSS. This is all about Prestashop vertical dropdown categories menuI. If you need more customization, you can contact us, our expert will assist you.

If you feel any issues to apply the above process, feel free to explore our PrestaShop Development Services.

Share :

Join The Ride

Subscribe to our newsletter with stories from our latest prestashop tutorial and the best tips & Tricks

Articles You may also like