Aurora
20 Setembro , 2025 14:18
1
Olá a todos,
Estou tendo um problema com o menu da barra lateral no meu fórum Discourse. A ordem das seções parece fixa — por exemplo, quando crio seções personalizadas adicionais, elas sempre aparecem acima da seção “Categorias”.
Para minha comunidade, seria importante ter essas seções personalizadas abaixo das categorias, mas não consigo encontrar nenhuma maneira de alterar ou controlar essa ordem.
Existe alguma maneira de gerenciar a posição das seções da barra lateral, ou atualmente não é possível personalizar a hierarquia/ordem desses blocos?
Agradeço antecipadamente por qualquer orientação!
Lilly
20 Setembro , 2025 15:02
2
Olá, você pode controlar a ordem das seções da barra lateral com CSS. Basta adicionar um novo componente com algo como o seguinte código CSS. Vá para admin -> temas e componentes -> componentes e crie um novo componente local
e adicione este código à aba CSS, onde custom-section-name é o nome slug de uma seção de menu personalizada:
.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;
}
}
captura de tela da aba CSS
Você terá que alterar os números e adicionar seções personalizadas ao código acima para atender às suas necessidades específicas. Ficará algo assim:
Aurora
20 Setembro , 2025 15:03
3
Obrigado! Eu tinha acabado de encontrar e implementar isso - mas não funcionou no celular
como o menu de navegação com a classe sidebar-sections está usando a propriedade display = \"flex\", você pode fazer algo assim - basta alterar os números com base na ordem em que deseja que as seções apareçam:
no css comum
.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-…
Aurora
20 Setembro , 2025 16:07
6
aqui também já foi um tópico - mas isso também não funciona
Hi @Lilly [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
21 Setembro , 2025 19:28
7
A classe sidebar-wrapper no celular é substituída por sidebar-hamburger-dropdown, acredito. Portanto, adicioná-la também deve fazê-la funcionar no celular:
.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
21 Setembro , 2025 20:00
8
Obrigado! Acabei de tentar - mas infelizmente não funcionou.
chapoi
21 Setembro , 2025 20:30
9
Ah, mais um detalhe: a barra lateral não está usando flex no mobile, aparentemente. Então, você precisaria adicionar isso também.
.sidebar-sections {
display: flex;
flex-direction: column;
}
Aurora
22 Setembro , 2025 11:38
10
Muito obrigado!! Isso funciona!! Ótimo!
O nome do cabeçalho da minha seção personalizada contém um espaço, por exemplo, “Ajuda aos usuários”.
Tentei usar data-section-name="ajuda aos usuários", mas isso não funciona.
Como posso especificar o espaço? É necessário algum mascaramento aqui? Por favor, ajude.
EDITAR:
