Quando aggiungo un’immagine, un’icona o un’emoji a una categoria, l’intestazione della categoria category-heading rimane fissa durante lo scorrimento verso il basso e occupa molto spazio.
Anche il componente del tema dell’intestazione della categoria è interessato, come potete vedere dal mio post qui sotto per riferimento.
Sì, sono d’accordo che sia un effetto collaterale fastidioso.
Purtroppo non ho una soluzione. L’intestazione della categoria si trova nello stesso elemento fisso della navigazione e non posso spostare la proprietà “sticky” un livello più in basso, perché “sticky” non funziona all’interno di un elemento flessibile…
Ti consiglio di nascondere o ridurre al minimo il logo con CSS su mobile.
Mentre questo è gradevole sul desktop, quando lo spazio si restringe (ad esempio su dispositivi mobili) rende l’Elenco degli Argomenti piuttosto difficile da leggere (specialmente se il testo è piuttosto esteso)
Questo è un effetto collaterale involontario del voler mantenere la navigazione visibile in realtà. Non sono sicuro che possa essere risolto (entrambi gli elementi potrebbero essere nello stesso contenitore o qualcosa del genere? ) e se devo scegliere, manterrò la mia intenzione originale.
Se qualcuno se la sente di dare un’occhiata, è il benvenuto comunque.
/* Disabilita i controlli della lista fissi di Horizon su mobile */
@media (max-width: 767px) {
.list-controls {
position: static !important;
top: auto !important;
transform: none !important;
margin-top: 0 !important;
}
}
Esatto, purtroppo non esiste un modo semplice per farlo usando CSS senza anche ristrutturare il layout.
Il tema Horizon rende attualmente l’intero contenitore .list-controls fisso, includendo l’intestazione della categoria. Non possiamo rendere fisso da solo il figlio .navigation-container, perché gli elementi fissi rimangono ancorati all’interno del contesto di scorrimento del loro genitore.
Potremmo ristrutturare questa area, ma si tratta di una di quelle modifiche che impatterebbero tutti i temi che utilizzano la struttura esistente… quindi c’è un’alta probabilità di regressioni per altri temi e personalizzazioni, anche se non hanno una navigazione fissa come questa.
Quindi, qual è la strada da seguire in questo caso?
Mi chiedo se dovremmo semplicemente nascondere la descrizione della categoria su mobile per Horizon. In ogni caso, le informazioni si duplicano, in uno spazio molto ristretto.
Ho ottenuto questo risultato con un semplice CSS nella scheda Mobile di un TC:
.category-heading.--has-logo {
display: none;
}
Forse questa soluzione dovrebbe essere inclusa in Horizon?
Sì, ma in questo caso si tratta di un problema più ampio legato al tema, non solo di una mia preferenza. Fatico a immaginare qualcuno che piaccia davvero una descrizione di categoria grande e fissa su dispositivi mobili; non credo che fosse questa l’intenzione dietro il design.
È davvero imprevedibile cosa le persone desiderano nella propria community. Ho deciso di lasciarlo così com’è: se gli utenti lo preferiscono, possono nasconderlo facilmente, ed è una soluzione meno confusa rispetto a chiedersi ‘perché il banner della categoria non appare su mobile’.