Réorganiser les éléments du menu hamburger existants

Contribuer UX
1

Est-il possible de supprimer ou de réorganiser les éléments préexistants du menu hamburger ? Par exemple, déplacer « À propos » ou « FAQ » vers le haut, supprimer « Raccourcis clavier », etc.

1 « J'aime »
2

Réorganiser le menu, probablement pas, mais supprimer des éléments de n’importe quelle partie de l’interface utilisateur peut généralement se faire avec des règles CSS dans Admin, Personnaliser.

3 « J'aime »
3

Avec CSS, vous pouvez faire quelque chose comme…

.hamburger-panel .panel-body-contents {
  display: flex; /* Configurer une mise en page flex pour réorganiser les éléments */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* Déplace les liens du pied de page vers le haut */
    .keyboard-shortcuts-link {
     display: none !important; /* Masquer le lien des raccourcis clavier */
    }
  }
}

Vous devrez peut-être ajuster certains autres éléments (bordures, espacement), mais je pense que cela vous mènera à 90 % du chemin.

8 « J'aime »
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

Tu es un sauveur, Kris, merci beaucoup !! Donc, de manière similaire, je pourrais utiliser quelque chose comme :

.hamburger-panel .panel-body-contents {
  display: flex; /* Configurer une mise en page flex pour pouvoir réorganiser les éléments */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* déplace les liens du pied de page vers le haut */
    .about-link {
    }
  }
}

si je devais déplacer « À propos » ou « FAQ » vers les liens généraux plutôt que vers le pied de page ?

5

Non, CSS ne peut aller aussi loin que de déplacer des sections entières — vous ne pourrez pas déplacer des liens vers différentes sections (je pense que c’est ce que vous demandez de toute façon).

3 « J'aime »
6

Quelle coïncidence ! Je suis justement venu sur Meta pour poser exactement la même question, et elle se trouve en tête de la liste des discussions. Quelle est la probabilité de ça ?

1 « J'aime »
7

Ah, je comprends ! Merci pour la clarification. Vous avez raison : mon objectif final était de déplacer About et FAQ de footer vers general, bien qu’il semble (d’après votre exemple CSS initial) que je puisse supprimer les deux sections, puis utiliser quelque chose comme ceci :

pour créer les liens About et FAQ dans la section general. Un peu bancal, mais apparemment plausible.

3 « J'aime »
8

Cela devrait fonctionner. J’utilise ce thème personnalisé, il fait très bien le travail.

4 « J'aime »
9

@awesomerobot, merci pour votre aide. Pourrais-je ajouter à cela en demandant à quoi pourrait ressembler le code pour simplement masquer certains éléments du menu hamburger en haut ?

J’ai essayé de jouer avec l’exemple de code que vous avez mis ici, mais je n’ai pas eu de succès.

Merci

3 « J'aime »
10

Si vous faites un clic droit sur l’un des liens et sélectionnez Inspecter, vous verrez des noms de classes associés à chacun… par exemple, le lien « Derniers » reçoit latest-topics-link

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

Pour le masquer avec CSS, vous feriez ceci :

.menu-panel li a.widget-link.latest-topics-link {
  display: none;
}
6 « J'aime »
11

Ah oui, j’oublie toujours la fonction d’inspection.

Parfait, merci !

2 « J'aime »
12

Des conseils pour personnaliser le menu hamburger maintenant qu’il est intégré dans la barre latérale ?

Y a-t-il un moyen de déplacer des éléments hors de l’expandeur Plus pour qu’ils soient visibles au niveau supérieur ?

Et qu’en est-il de la dissimulation d’éléments ? J’ai essayé ceci sans succès :

.d-sidebar .sidebar-sections .sidebar-section-link li a.sidebar-section-link-faq{
  display: none;
}

Edit : OK, cela a fonctionné pour masquer le lien « À propos » :

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

Merci beaucoup !

1 « J'aime »