Promokit Helpdesk Alysum

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

Do you know the code to insert?

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() {
      categoriaMenu.classList.toggle('menu-categorie-expanded');
    });
  }
});

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?

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() {
  categoriesList.classList.toggle('open');
  const categories = categoriesList.querySelectorAll('li');
  categories.forEach(function(category) {
    category.classList.toggle('hidden');
  });
});

categoriesList.classList.remove('open');

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?

No, with that selector it appears the category tree

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!