Come controllare l'ordine delle sezioni del menu nella barra laterale?

[Aurora]

Ciao a tutti,

Sto riscontrando un problema con il menu della barra laterale nel mio forum Discourse. L’ordine delle sezioni sembra fisso: ad esempio, quando creo sezioni personalizzate aggiuntive, appaiono sempre sopra la sezione “Categorie”.

Per la mia community, sarebbe importante avere quelle sezioni personalizzate sotto le categorie invece, ma non riesco a trovare alcun modo per cambiare o controllare questo ordine.

C’è un modo per gestire la posizione delle sezioni della barra laterale, o al momento non è possibile personalizzare la gerarchia/l’ordine di questi blocchi?

Grazie in anticipo per qualsiasi indicazione!

[Lilly (Lillian Louis)]

Ciao, puoi controllare l’ordine delle sezioni della barra laterale con CSS. Aggiungi semplicemente un nuovo componente con del codice CSS simile al seguente. Vai su admin -> temi e componenti -> componenti e crea un nuovo componente locale

e aggiungi questo codice nella scheda CSS, dove custom-section-name è il nome slug di una sezione del menu personalizzata:

.sidebar-wrapper {
  .sidebar-custom-sections {
    display: contents;
  }
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}

screenshot della scheda CSS

Dovrai modificare i numeri e aggiungere sezioni personalizzate al codice sopra per soddisfare le tue esigenze specifiche. Avrà un aspetto simile a questo:

[Aurora]

Grazie! Avevo appena trovato e implementato questo, ma non funzionava sul cellulare

Rearrange Sidebar Order?

since the navigation menu sidebar-sections class is using the display = "flex" property you can do something like this - just change the numbers based on what order you want the sections to appear: in common css .sidebar-section-wrapper.sidebar-section[data-section-name="categories"] { order: 1; } .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] { order: 2; } .sidebar-section-wrapper.sidebar-section[data-section-name="chat-dms"] { order: 3; } .sidebar-section-wrappe…

[Aurora]

qui era già stato un problema, ma anche questo non funziona

How to sort nav menu sections?

Hi @Lilly I used your CSS code to rearranged the order of the nav sections. It works well when the webpage in the full size. [image] However, I try to resize the webpage to a smaller width, the order settings in the CSS code are invaild. The last section turned to the second just like the following pic: [image] I found that the display: block; property of the sidebar-sections prevents the order from having an effect. Then, I try to add some code to the CSS code. .sidebar-sections…

[chapoi]

La classe sidebar-wrapper su mobile è sostituita da sidebar-hamburger-dropdown, credo. Quindi aggiungerla dovrebbe farla funzionare anche su mobile:

.sidebar-wrapper, 
.sidebar-hamburger-dropdown { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}

[Aurora]

Grazie! L’ho appena provato, ma purtroppo non ha funzionato.

[chapoi]

Oh giusto, un altro dettaglio: la barra laterale non sta usando flex su mobile, apparentemente. Quindi dovrai aggiungerlo anche tu.

.sidebar-sections {
display: flex;
flex-direction: column;
}

[Aurora]

Grazie mille!! Funziona!! Fantastico!

[rakekniven]

Il nome dell’intestazione della mia sezione personalizzata contiene uno spazio, ad esempio “Aiuta gli utenti”.

Ho provato a usare data-section-name="aiuta gli utenti", ma non funziona.

Come posso specificare lo spazio? È necessaria qualche maschera qui?
Per favore, aiutami

MODIFICA:
Dopo aver ispezionato il sito usando gli strumenti di sviluppo di FF, ho scoperto che la soluzione è “aiuta-utenti”.