Naprawa wyglądu menu górnego

Jeżeli dodasz w swoim sklepie dużo kategorii i podkategorii, górne menu poziome może zacząć wyglądać niezbyt dobrze.

Często spotykanym efektem jest sporo białej przestrzeni pomiędzy elementami menu, co czyni je trudnym do nawigacji.

Aby to naprawić, proponujemy wprowadzić zmiany w następujacym pliku:

TWÓJ_SZABLON/css/modules/blocktopmenu/superfish-modified.css

Znajdź ten kod:

W pierwszej sekcji, dodaj układ kolumnowy:

.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;
  }

Zmień kod drugiej sekcji na:

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

Po wprowadzeniu tych zmian menu górne twojego sklepu powinno zacząć wyglądać znacznie lepiej. Możesz też poeksperymentować z liczbą kolumn, aby znaleźć najlepsze dopasowanie.

Aby upewnić się, że menu będzie wyglądało dobrze na urządzeniach mobilnych, musisz wprowadzić jeszcze jedną zmianę, dodając poniższy kod na końcu pliku:

@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;
	}
}

[przykładowe menu po tej poprawce]

Alternatywne rozwiązanie

Alternatywnie, możesz usunąć z górnego menu wyświetlanie podkategorii.

W tym celu znajdź poniższy kod:

I zmień go na:

display: none !important;

Możliwe jest również połączenie tych dwóch rozwiązań.

---

Ta strona jest elementem naszej listy najczęstszych poprawek w skrypcie Prestashop, aby otrzymać pełną listę, podaj swój mail w formularzu na tej stronie