• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 08.03.23, 16:44
  • Opened by: Nicola
  • Closed by: Fred
  • Closed on: 31.03.23, 09:13
  • Reason: Closed
  • Comment: Glad to help!

Ticket #24383 - Compressed menu

Hi, how can i make the menu compressed for mobile version? Because i have a lot of categories and they make my page really long. I disabled the AMP version for mobile, then i’m modifying it on elementor. Thanks


Immagine.jpg (158.4 KiB)


Fred 08 Mar 2023, 17:13

There is no such option in back office.
You can do that using custom CSS

Nicola 09 Mar 2023, 08:42

Do you know where is the file to modify the CSS?

Fred 09 Mar 2023, 19:37

Just add it to Theme Settings → Customer CSS

Nicola 10 Mar 2023, 12:00

Do you know the code to insert?

Nicola 10 Mar 2023, 12:24

I checked, if i’m correct i should insert the following code:

/* Regole CSS per il menu delle categorie sulla versione mobile */
.menu-categorie {
  display: none;

/* Regole CSS per il pulsante del menu */
.menu-categorie-toggle {
  display: block;
  background-color: #f1f1f1;
  color: #333;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 16px;
  cursor: pointer;

/* Regole CSS per il menu espandibile */
.menu-categorie-expanded {
  display: block;

And this part for the javascript part:

// Codice JavaScript per creare un menu espandibile sulla versione mobile
document.addEventListener('DOMContentLoaded', function() {
  var categoriaMenu = document.querySelector('.menu-categorie');
  var categoriaToggle = document.querySelector('.menu-categorie-toggle');
  if (categoriaMenu && categoriaToggle) {
    categoriaToggle.addEventListener('click', function() {

And this CSS for the rule to display only for mobile version and keep the desktop version the same:

/* Regole CSS per il menu delle categorie sulla versione desktop */
@media (min-width: 768px) {
  .menu-categorie {
    display: block;
  .menu-categorie-toggle {
    display: none;
  .menu-categorie-expanded {
    display: block !important;

Do you think could be ok?

Fred 10 Mar 2023, 19:07

Yes, absolutely it can be.

Nicola 13 Mar 2023, 10:36

I tried with this code:

@media only screen and (max-width: 767px) {
  .categories-list li {
    display: none;
  .categories-list.open li {
    display: block;

In javascript:

const categoriesTitle = document.querySelector('.module-title');
const categoriesList = categoriesTitle.nextElementSibling;

categoriesTitle.addEventListener('click', function() {
  const categories = categoriesList.querySelectorAll('li');
  categories.forEach(function(category) {


Is working when i click on the “Category” title, but i need to display categories only when i click on the Title “category”, when i load the page it should’t display any category. How to fix this?

Fred 14 Mar 2023, 18:58

try this selector

const categoriesTitle = document.querySelector('.module-title > span');
Nicola 15 Mar 2023, 10:19

No, with that selector it appears the category tree

Fred 15 Mar 2023, 17:33

Try this

const categoriesToggler = document.querySelector('.module-title > span');
const categoriesTitle = document.querySelector('.module-title');
const categoriesList = categoriesTitle.nextElementSibling;

categoriesToggler.addEventListener('click', function() {

Unfortunately we don’t have much time to provide code customisation

Nicola 15 Mar 2023, 18:27

Still have the same problem. Ok i keep it not compressed, at least is working now. You can close the ticket, when the AMP version will be ready let me know because on that version i hadn’t the problem and i can complete everything. Thanks!

Fred 15 Mar 2023, 18:48

For some reason Prestashop still didn’t give us any feedback. I let you know when will have some news

Nicola 31 Mar 2023, 09:11

thanks you can close the ticket