Fix top menu layout

When you add a lot of categories with subcategories to your shop, and display them in the top menu, the final effect may not look very nice.

An often seen effect is a lot of whitespace in the menu, making it hard to navigate.

In order to fix that, you can apply a few changes in the following file:

YOUR_THEME/css/modules/blocktopmenu/superfish-modified.css

Locate the following lines of code:

In the first section, add column layout:

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%;
  -webkit-column-count: 5;
  -moz-column-count: 5;
  -o-column-count: 5;
  column-count: 5;
  }

Change the second section to:

.sf-menu > li > ul > li {
  padding: 8px 15px 8px 0;
  display: inline-block;
}

After the above changes your menu should start looking much better, you may also want to adjust the number of columns to find a best fit.

You need to make one more change, to make sure the menu looks good on mobile devices. Add the following code at the end of the file:

@media (max-width: 767px) {
	.sf-menu > li > ul {
	  -webkit-column-count: 1;
	  -moz-column-count: 1;
	  -o-column-count: 1;
	  column-count: 1;
	}
	.sf-menu > li > ul > li {
	   display: block;
	}
}

[an example menu after this fix]

An alternative approach

As an alternative, you may remove subcategories from the menu.

To do that, locate the following part of code:

And change it to:

display: none !important;

You may also experiment with both changes.

---

This page is a part of our list of the most common Prestashop enhancements and fixes. To get the full list, subscribe to our newsletter.