Reorganizar itens existentes do menu hambúrguer

Contribuir Experiência do Usuário
1

É possível remover ou reorganizar itens pré-existentes que estão no Menu Hambúrguer? Por exemplo, mover Sobre ou Perguntas Frequentes para o topo, remover Atalhos de Teclado, etc.

1 curtida
2

Reorganização do menu, provavelmente não, mas remover itens de qualquer parte da interface do usuário geralmente pode ser feito com regras CSS em Admin, Personalizar.

3 curtidas
3

Com CSS, você pode fazer algo como…

.hamburger-panel .panel-body-contents {
  display: flex; /* Configura um layout flexível para reordenar os elementos */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* move os links do rodapé para o topo */
    .keyboard-shortcuts-link {
     display: none !important; /* Oculta o link de atalhos de teclado */
    }
  }
}

Talvez você precise ajustar algumas outras coisas (bordas, espaçamento), mas acho que isso já te levaria a 90% do caminho.

8 curtidas
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

Você é um salva-vidas, Kris, muito obrigado!! Então, de forma semelhante, eu poderia usar algo como:

.hamburger-panel .panel-body-contents {
  display: flex; /* Configura um layout flexível para que você possa reordenar as coisas */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* move os links do rodapé para o topo */
    .about-link {
    }
  }
}

se eu fosse mover Sobre ou FAQ para os links gerais em vez do rodapé?

5

Não, o CSS só pode ir tão longe quanto mover seções inteiras — você não conseguirá mover links para seções diferentes (acho que é isso que você está perguntando, de qualquer forma).

3 curtidas
6

Que coincidência! Acabei de vir ao Meta para fazer exatamente essa pergunta, e ela está no topo da lista de discussões. Que sorte!

1 curtida
7

Ah, entendi! Obrigado pela esclarecimento. Você está correto — meu objetivo final era mover About e FAQ de footer para general, embora pareça (com base no seu exemplo inicial de CSS) que eu possa excluir ambas as seções e, em seguida, usar algo como:

para criar os links About e FAQ na seção general. Um pouco estranho, mas aparentemente plausível.

3 curtidas
8

Isso deve funcionar. Eu uso esse tema personalizado, ele faz o serviço muito bem.

4 curtidas
9

@awesomerobot, obrigado pela sua ajuda. Poderia eu complementar isso perguntando como seria o código para apenas ocultar alguns dos itens no menu hambúrguer superior?

Tentei brincar com o exemplo de código que você colocou aqui, mas não tive sorte.

Obrigado

3 curtidas
10

Se você clicar com o botão direito em um dos links e selecionar Inspeção, verá os nomes de classe associados a cada um… por exemplo, o link “mais recentes” recebe latest-topics-link

58%20PM
58%20PM818×328 28.9 KB

Para ocultá-lo com CSS, você faria o seguinte:

.menu-panel li a.widget-link.latest-topics-link {
  display: none;
}
6 curtidas
11

Ah, sim, eu sempre esqueço o recurso de inspeção.

Perfeito, obrigado!

2 curtidas
12

Alguma dica para personalizar o menu hambúrguer agora que ele está integrado à barra lateral?

Existe alguma forma de mover itens do expassador Mais para que fiquem visíveis no nível superior?

Editar: Ok, isso funcionou para ocultar o link “Sobre”:

.sidebar-wrapper li a.sidebar-section-link-about {
    display: none;
}

Muito obrigado!

1 curtida