web-dev-qa-db-fra.com

Élément de menu actuel

J'essaie de comprendre pourquoi mon texte ne montre pas le blanc comme il se doit.

Je redéfinis bootstrap.min.css dans style.css la classe current-menu dans Wordpress, mais sans succès. Il met en surbrillance le bon onglet, mais la couleur du texte ne change pas.

Quelqu'un peut-il repérer le problème?

.current-menu-item > a{
background-color:#123456;
}
.menu-item:hover > a{
background-color:#123456;
color: white;
}

J'ai aussi essayé ça:

.current-menu-item > a{
background-color:#123456;
}

.current-menu-item:hover{
background-color:#123456;
color: white;
}

enter image description here

menuscustomization
1
Linards Berzins

Est-ce que vous essayez seulement de changer la couleur du texte en survol?

Si vous voulez seulement changer la couleur du texte (pas juste en survol, mais aussi quand l'utilisateur est sur cette page).

/* This targets the current page's menu item */
.current-menu-item > a{
background-color:#123456;
color: white;
}

/* This targets other menu items when you hover over them */
.menu-item:hover > a{
background-color:#123456;
color: white;
}

Si vous avez besoin de plus de spécificité, vous pouvez alors ajouter la classe .menu-item ou la classe d’amorçage appliquée (.nav ou .nav-bar généralement).

Donc, votre première règle serait

.menu-item.current-menu-item > a{
background-color:#123456;
color: white;
}

Ceci est juste basé sur l'image, sans voir le balisage réel, c'est difficile à dire - mais inspectez l'élément à l'aide des outils de développement intégrés de votre navigateur et vous devriez pouvoir voir facilement quels styles sont appliqués et avec quelle spécificité, puis vous définissez simplement votre règle pour être plus élevé.

2
aj-adl

Je suppose que votre problème ici est la priorité, pas votre code. Je vois pourquoi vous ne voulez pas modifier la feuille de style de démarrage, mais plutôt l'ajouter à votre feuille de style principale.

La feuille de style principale est chargée en premier. Par conséquent, toutes les modifications que vous apportez au bootstrap seront chargées en premier lieu via votre feuille de style principale.

Votre feuille de style d'amorçage est chargée après votre feuille de style principale, ce qui signifie que toutes les modifications sont remplacées par les styles par défaut de la feuille de style d'amorçage. C'est pourquoi vous ne les voyez pas.

Il existe deux moyens de lutter contre cela: ajouter la priorité css !important à tous les styles personnalisés (une méthode que je n'encourage pas et que je n'aime pas utiliser) ou créer une feuille de style personnalisée et définir une priorité faible (quelque chose comme 999, être un nombre supérieur à 10) lors de la mise en file d'attente (méthode recommandée). Par exemple, créez une feuille de style personnalisée et appelez-la custom-style.css.

function enqueue_custom_style() {
    <--- enqueue custom stylesheet --->
 }

add_action( 'wp_enqueue_scripts', 'enqueue_custom_style', 999 );
2
Pieter Goosen