Como posso esconder o link de Badges na barra lateral?

Imagino que a personalização da barra lateral será adicionada em devido tempo, mas por enquanto gostaria de remover o link “Badges” ou, pelo menos, escondê-lo em “Mais…”.

Devo apenas usar CSS para escondê-lo, por enquanto?

Não consigo entender bem o CSS. As divs que contêm os links são da classe sidebar-section-link-wrapper sem nenhum id. Quando tento esconder a tag a com a.sidebar-section-link-badges { display: none; }, nada é escondido.

2 curtidas

Olá, no menu hambúrguer eu usei "nth-child" para fazer esse tipo de coisa

https://www.w3schools.com/cssref/sel_nth-child.asp

1 curtida

nth-child é muito útil para muitas coisas, no entanto, neste caso, acho que é provavelmente perigoso. Como é baseado apenas em números, para isso exigiria uma garantia de que os Badges permanecerão na mesma posição.

Se algo mais for adicionado/removido/movido antes dele, a posição dos Badges mudará, o que pode levar à revelação dos Badges, algo mais sendo ocultado e isso pode passar despercebido.

:has() é ideal para isso, no entanto, infelizmente seu suporte ainda é limitado, notavelmente está desabilitado por padrão no Firefox e está faltando em muitos navegadores móveis.

Se ocultá-lo não for crítico para você, ou seja, for aceitável ocultá-lo sempre que possível para a melhor experiência, enquanto permanece visível em navegadores que ainda não suportam :has(), você pode usar o seguinte seletor:

sidebar-section-link-wrapper:has(a.sidebar-section-link-badges) { display: none; }
1 curtida

Obrigado pelas ideias. Provavelmente farei isso por enquanto. Mas espero que os ids possam ser adicionados.

1 curtida

Olá,

Você pode ocultá-lo com isto. :slightly_smiling_face:

.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}
6 curtidas

Acabei de copiar e colar isso no meu componente de tema antigo (que fez o mesmo com o antigo menu hambúrguer) e funcionou! Muito obrigado, e obrigado novamente a todos os outros também.

3 curtidas

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Infelizmente, este CSS não parece estar funcionando com a versão 2.9.0beta12… alguma ideia? :slight_smile:

Este ainda funciona para mim na versão mais recente.


Você pode compartilhar seu código?

1 curtida

Peço desculpas. Funciona sim. Eu comentei porque havia um bug com o link “Mais”.

Esse bug é que o link é exibido mesmo quando não há opções de menu “Mais”. Com o número de opções no meu fórum, com a opção “Badges” presente, mesmo que eu não a queira lá, pelo menos o “Mais” tem algo para fazer! (O problema permanece… quando você está na própria página de Badges, o link inútil “Mais” está lá.) "More..." shows in sidebar when there is nothing more

Por alguma razão, o recurso “colar URL sobre texto para criar hiperlink” não funcionou ao editar esta postagem.

Entendo. Na verdade, acho que isso não é um bug, pois as opções do menu Mais estão lá, mas ocultas, então não está vazio. Mas, se entendi corretamente, você oculta tudo dentro do menu Mais? Se for o caso, acho que ocultar toda a seção Mais seria melhor?

Para ocultar o dropdown do menu Mais de todas as páginas:

// ocultar menu Mais de todas as páginas
.sidebar-more-section-links-details {
  display: none;
}

Se você quiser ocultá-lo em uma página específica, pode usar a classe do corpo para direcioná-la.
Você pode encontrá-la aqui.

Por exemplo, na página de distintivos, ficará assim:

// ocultar menu Mais de uma página específica (distintivos)
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

Isso ocultará o dropdown Mais, mas mostrará Distintivos na barra lateral.


Mas se você usar o código anterior para ocultar Distintivos, isso também não aparecerá.

// ocultar item do menu Mais de distintivos
.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}

// ocultar menu Mais de uma página específica (distintivos)
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

1 curtida

Eu vejo isso como um bug porque não acho que uma opção “Mais” deva aparecer, a menos que haja mais coisas e, portanto, clicar em “Mais” tenha algum efeito. O relatório de bug está aqui: "More..." shows in sidebar when there is nothing more

Este tópico foi automaticamente fechado após 617 dias. Novas respostas não são mais permitidas.