ModernBB : Menu invisible sauf quand on passe la souris dessus

[Aimie]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://willis-ekbom.forumactif.com/

Description du problème

Bonsoir à tous,

Je viens ici car je n'arrive pas à afficher le menu du forum, il ne s'affiche correctement que lorsque je défile vers le bas.
Les boutons sont du coup blancs avec l'écriture noire, on les voit donc pas si on ne "clic" pas dessus.
J'aimerai du coup changer les couleurs de ses dits boutons de façon à ce qu'ils s'affichent correctement.
Merci d'avance pour l'aide que vous m'apporterez.

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif

Les boutons sont du coup blancs avec l'écriture noire, on les voit donc pas

Noir sur blanc ça devrait se voir ! La preuve sur ce forum.

Votre css (de base) contient :

Code:

.navbar a {
   color: #FFF;
   font-size: 1.3rem;
   padding: 6px;
   display: inline-block;
   border-radius: 3px;
   line-height: 1.3846;
    }
.navbar a:hover {
   background-color: #FFF;
   color: #000;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }

A l'état normal les boutons sont en blanc (fff) sans aucun fond
A l'état survolé c'est du noir (000) sur fond blanc (fff)
Il n'y a donc aucun bogue.

Seulement comme par hasard, vous avez choisi une image de fond qui est blanche à cet endroit, aussi blanche que les liens de la navigation.

Essayez d'ajouter à votre CSS le bloc suivant :

Code:

.navbar a {
   color: #000;
    }

[Aimie]

Merci beaucoup, y a t'il une solution également pour colorer seulement le fond des boutons et du lien inscrit dessus ? (sans que ça colorie seulement toute la barre de navigation).
Ou bien de pouvoir refaire tout les boutons en y rajoutant une image ?
J'ai dejà testé ceci mais quand j'ajoute une image pour remplacer (Accueil, calendrier, FAQ etc) le bouton apparaît très petit.

[Neptunia]

Il est possible de styler individuellement chaque bouton avec un peu de css

Ici on passe en rouge le lien S'enregistrer :

Code:

a.mainmenu[href^='/register'] {
 color: #FF0000;
}

Là on donne un fond vert au lien FAQ :

Code:

a.mainmenu[href^='/faq'] {
 background-color: #00ff00;
}

Ou bien de pouvoir refaire tout les boutons en y rajoutant une image ?
J'ai dejà testé ceci mais quand j'ajoute une image pour remplacer (Accueil, calendrier, FAQ etc) le bouton apparaît très petit.

Oui c'est possible, mais un peu plus compliqué que sur les autres versions.

Ne connaissant pas modernBB je préfère vous aiguiller sur un sujet résolu en espérant que ça soit le bon :
ModernBB - Agrandir les icônes du menu & menu constant

[Aimie]

Cela fonctionne très bien, mais quand j'essaie de faire la même chose avec "Accueil etc" cela ne fonctionne pas.

[Neptunia]

Pour Accueil essayez comme ceci (pas testé de mon côté, tous mes fofos ont des images)

Code:

    a.mainmenu[href='/'] {
    color: #FF0000;
    }

Pour etc bah je connais pas. Mais je vois que vous avez réussi pour Calendrier et Rechercher, donc vous avez compris le principe.

[Aimie]

Merci pour accueil c'est celui qui me manquait. J'ai compris le fonctionnement que vous avez expliqué.
Dernière petite question.
Y a t'il possibilité de centrer le texte sur le bouton du coup ?

[Neptunia]

C'est déjà centré !

Chaque bouton contient une image (invisible mais qui prend tout de même un peu de place).


Peut-être ce css résoudrait il le problème ?

Code:

.navbar img{
  display: none;
    }

[Aimie]

Ca fonctionne, merci beaucoup pour votre aide, je vous souhaite une bonne fin de semaine.

[Neptunia]

Je viens de vérifier.

Normalement une image vide prend un pixel (et la gêne est imperceptible). Mais sous ModernBB toutes les images font 16px par défaut.
En n'affichant plus les images on récupère ces 16 pixels