Menu - Ajouter une div à la fin des éléments parents

Par Florian.C, il y a 9 ans


Salut !

J'essaye de faire en sorte d'avoir un élément ">" à la fin de mes éléments parents.
Un exemple : http://prntscr.com/fjlrta

Le problème c'est que je ne sais pas cibler ces éléments, en tout cas avec wp_nav_menu c'est impossible..

Faut-il utiliser WALKER_NAV_MENU ou y'a t-il plus simple ?

Merci beaucoup

24 réponses

Sparkosis, il y a 9 ans

Salut, Je pense que tu va devoir passé par le callback oui ou alors si tu as une façon de pouvoir rajouter un element css par dessus t'es éléments parent (genre si c'est parent alors tu lui met une class par exemple dropdown, et dans cette class tu lui met un content: 'contenu')

Florian.C, il y a 9 ans

J'ai essayé la solution css.

Tiens un beau dessin http://prntscr.com/fjnh94 , j'ai souligné la classe "menu-item-has-children".

J'ai donc ciblé le premier "a" de cette classe mais malheuresement cela s'applique à tous les "a" du ul en dessous...

.menu-item-has-children a:first-child{ color:pink; }

Ils deviennent tous rose.

Merci !

Sparkosis, il y a 9 ans

Avec plaisir, faudrait que tu sois plus précis au niveau de ton selecteur je pense, avec le current-menu-item peut être ?

Florian.C, il y a 9 ans

Oui il faut cibler le premier a de chaque "menu-item-has-children" mais je n'y arrive pas ça me rend fou.

Current-menu-item je m'en servirait pour changer la flèche :)

Florian.C, il y a 9 ans

MAJ : j'ai trouvé comment donner une classe à un li en particulier.

Back-office>menu>option d'écran>cocher "Classe CSS"

Florian.C, il y a 9 ans

Enfin j'arrive toujours pas à clibler le premier a

Sparkosis, il y a 9 ans

hum

li.taclass a:first-child{...}

ne fonctionne pas ?

Florian.C, il y a 9 ans

Non...

li (taclass) a rose ul li a rose li a rose

C'est bizarre quand même

Sparkosis, il y a 9 ans

ah ouais je comprends pourquoi, attends j'esssaie de chercher voir

Sparkosis, il y a 9 ans

ça ?

//En général c'est ta class du ul li.taclass:not(.sub-menu) a:first-child{ ... }
Florian.C, il y a 9 ans

Pas bête le :not !

Mais ... non :'(

#menu-menu1_mobile{ .fleche{ a:not(.sub-menu){ color:pink; } } }
Sparkosis, il y a 9 ans

Les autres a on la class sub-menu ?

Florian.C, il y a 9 ans

A ben non je suis bête les a non pas de class ou d'id

Sparkosis, il y a 9 ans

tu peux en rajouter une ?

Florian.C, il y a 9 ans

Avec Wordpress j'ai pas l'impression...

Florian.C, il y a 9 ans

Après ça ça fonctionne par contre

#menu-menu1_mobile{ .fleche{ a{ color:pink; } .sub-menu{ a{ color:red; } } } }
Sparkosis, il y a 9 ans

Donc tu as réussi ?

Florian.C, il y a 9 ans

Non, cette solution ne me permet pas de placer le signe ">" où je veux :/

Sparkosis, il y a 9 ans

mince :/
Est ce que tu utilise bootstrap sur ton thème ?

Florian.C, il y a 9 ans

Non
Je vais devoir trouver comment ce servir de WALKER_NAV_MENU :)

Florian.C, il y a 9 ans

Merci, je vais voir ça ;)

Sparkosis, il y a 9 ans

Pas de quoi, bon courage et tiens moi au jus :)

Florian.C, il y a 9 ans

Euh je dois être très très très fatigué je pense. Il suffisait de mettre ma div dans 'link_after' (du wp_nav_menu). Bon bon bon je vais dormir moi ^^'

Merci de ton aide @Sparkosis !