[RÉGLÉ] Couleurs diféérentes pour chaque lien du menu principal.

[Slixis]

Bonjour à tous,
Mon souci est le suivant: Je souhaite mettre pour chaque lien de mon menu principal une couleur d'arrière plan différente. J'arrive à mettre un(e) background-color différent(e) en appliquant le css ci-dessous:

/* Nav bar custom colors*/
ul.navbar-nav > li:nth-child(3) a{color: #FFFFFF!important;}
ul.navbar-nav > li:nth-child(3) a:hover{color: #FFFFFF!important; background-color:#1279A4;}
ul.navbar-nav > li:nth-child(4) a{color: #FFFFFF!important;}
ul.navbar-nav > li:nth-child(4) a:hover{color: #FFFFFF!important; background-color: #6F9401;}
ul.navbar-nav > li:nth-child(4) a:focus{color: #FFFFFF!important; background-color: #6F9401;}
ul.navbar-nav > li:nth-child(4) a:active{color: #FFFFFF!important; background-color: #6F9401;}
ul.navbar-nav > li:nth-child(4) a:visited{color: #FFFFFF!important; background-color: #6F9401;}

Mais quand quand je suis sur la page concernée. La couleur d'arrière plan disparait. J'ignore comment faire en sorte que la couleur d'arrière plan reste quand on est sur la page concernée.
Le lien du site est: http://www.wixitest.ovh (Il faut cliquer sur les liens "Téléphonie" ou "Conférence" pour voir ce dont je parle.
Merci de votre assistance.

[lefabdu51]

Re : Couleurs diféérentes pour chaque lien du menu principal.

le plus simple :
utiliser un suffixe de menu dans l'element de menu
par exemple " monmenu" (l'espace avant le nom de la classe est important).

puis dans les css
poser le code ci dessous :

.monmenu {mes propriétés}
.monmenu:hover {mes propriétés}
.monmenu:focus {mes propriétés}
.monmenu:active {mes propriétés}
.monmenu:visited {mes propriétés}

L'ordre des pseudo classe est important aussi.

[Slixis]

Re : Couleurs diféérentes pour chaque lien du menu principal.

Salut Lefabdu51,
Merci pour ta réaction. J'ai testé ta suggestion avec le menu "Sécurité" (tu peux regarder le résultat, mais il ne fonctionne pas).
L'idée ce n'est pas d'avoir une couleur d'arrière plan fixe. Je veux que les choses soient comme sur le site https://www.stella-telecom.fr/
La couleur ne doit apparaître que si le lien est activé.

[Slixis]

Re : Couleurs diféérentes pour chaque lien du menu principal.

La communauté est assez réactive en général. Ce doit être un casse-tête ma question!
J'avoue que je galère depuis plusieurs jours.

[lefabdu51]

Re : Couleurs diféérentes pour chaque lien du menu principal.

non, j etait AFK ce matin.

dans ce cas, ne garde que .monmenu:active.
Cest cette pseudo classe qui regit l'element actif.

Tu as aussi la classe .active, qui sert quand à elle pour touts les éléments de menu actif.

[Slixis]

Re : Couleurs diféérentes pour chaque lien du menu principal.

Désolé, je ne comprends pas tout à fait ce que tu veux dire par là. Tu peux me mettre le code s'il te plaît.
J'ai bien mis la class monmenu comme tu le voir sur le site au menu Securite".

[Slixis]

Re : Couleurs diféérentes pour chaque lien du menu principal.

Tu veux dire cela:

.monmenu a:active {color: #FFFFFF!important; background-color: #BF0189;}

Si c'est cela, je viens de le mettre mais cela ne marche pas.

[lomart]

Re : Couleurs diféérentes pour chaque lien du menu principal.

Bonsoir,

La solution de lefabdu51 doit fonctionner. Mais elle est inutile car tes pages sont déjà identifiés.

Regardes le source de ta page, tu trouveras :

#sp-page-builder #section-id-1481634749329{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;background-color:rgba(245, 245, 245, 1);}
#sp-page-builder #section-id-1481637065581{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;background-color:rgba(245, 245, 245, 1);}
#sp-page-builder #section-id-1477945476856{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;background-color:rgba(245, 245, 245, 1);}

Ce qui veut dire que tu définis le fond des articles dans sp-page-builder. Actuellement, ils sont tous gris.
Pour la téléphonie, il faudrait avoir :

#sp-page-builder #section-id-1481640081453{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;background-color:rgba(18, 121, 164, 1);}

[lefabdu51]

Re : Couleurs diféérentes pour chaque lien du menu principal.

@lomart: eh, le codeur fou, tu refait la même pour le fond des liens de menu ?

C'est le fond de chaque lien dans son menu qu il veut changer et non le fond de la page complete (ou alors g pas compris la demande).

Il ne me sembles pas que sp pagebuilder ait a voir avec les liens de menu ( je ne suis pas sur car je ne l utilise pas)...

[lomart]

Re : Couleurs diféérentes pour chaque lien du menu principal.

C'est le fond de chaque lien dans son menu qu il veut changer et non le fond de la page complete (ou alors g pas compris la demande).

Je crois que tu as bien compris et que c'est moi qui ait répondu trop vite

[Slixis]

Re : Couleurs diféérentes pour chaque lien du menu principal.

Je confirme Lefadu51 que c'est bien le fond de chaque lien du menu que je veux changer, quand le lien est activé.
Du coup pour l'instant personne n'a la solution je crois. De mon côté je fais les forums, même anglais. Je teste tout, mais je n'ai pas encore trouvé la solution.

[lomart]

Re : Couleurs diféérentes pour chaque lien du menu principal.

Après vérification (pour ne pas être à coté de la plaque une 2e fois), il suffit de créer des règles CSS comme celle-ci pour le téléphone

.active[data-id="150"] {
    background-color: red;
}

Récupérer les data-id avec un inspecteur de code et mettre les bonnes couleurs

[Slixis]

Re : Couleurs diféérentes pour chaque lien du menu principal.

ça y est ! On y est!!!! C'est bien ce qu'il fallait faire!!!! Bravo Lomart! You are a great man! Thank you very much!

Grand merci à toi aussi Lefabdu51 pour tes suggestions.

Je suis super content après des jours de galère. Cela intéressera d'autres, j'en suis persuadé.

[Slixis]

Re : Couleurs diféérentes pour chaque lien du menu principal.

Pour ceux que cela intéresse, le code final pour obtenir le même rendu que le mien est le suivant:

ul.navbar-nav > li:nth-child(3) a:link{color: #FFFFFF!important;}
ul.navbar-nav > li:nth-child(3) a:hover{color: #FFFFFF!important; background-color: #FF9801!important;}
.active[data-id="133"] {
color: #FFFFFF!important;
background-color:#FF9801;
}

NB01: le nth-child(3) représente la position de la rubrique sur la barre de menu.
NB02: le data-id="133" représente l'ID de la rubrique que vous pouvez obtenir en allant sur le code source de la page.

Voilà.

[lefabdu51]

Re : Couleurs diféérentes pour chaque lien du menu principal.

le codeur fou a encore frappé...
Merci pour la construction de la classe.active.
Je ne la connaissait pas...