Barre de navigation invisible

[Grego63]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Internet Explorer, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://yaris-cross-club.forumactif.com/

Description du problème

Bonjour tout le monde, j'ai un petit problème sur mon forum, la barre de navigation était invisible du coup j'ai changé la couleur du fond en bleu mais ça fait horrible et je suis revenu a transparent, je cherche un moyen pour qu'elle soit visible tout en voyant la bannière.

J'ai aussi un autre problème la description du forum se voit à peine, je cherche à la mettre en noir et gras.

Merci de vos réponses et de votre aide.

Cordialement.

[Laférosse]

Bonsoir, pour la couleur du texte de la description essayez ceci :

Code:

#site-desc p {
color: black!important;
font-weight: bold;
font-family: 'Roboto';
font-size: 22px;
}

Vous pouvez changer la couleur black, la police, sa taille et enlever le gras si cela ne vous convient pas.
Code à poser dans votre feuille de  style (CSS).


Pour la Navbar ceci vous sera peut-être pertinent.

https://forum.forumactif.com/t393975-modernbb-couleur-de-la-barre-de-navigation-flottante?highlight=description+modernbb

[jucarese]

Essayez d'utiliser ce CSS pour que seules les icônes avec une couleur d'arrière-plan apparaissent.

Code:

.navbar img{
background-color:beige¡important;}

Vous pouvez mettre la couleur souhaitée.

[Grego63]

Merci de votre aide, mais je mets la couleur où, ex je veux mettre grise #848484 ?

Merci de votre réponse .

[Laférosse]

Cela donnerait avec le code de Jucarese :

Code:

.navbar img{
background-color: #848484 !important;}

À copier/coller dans la feuille de style (CSS) via votre panneau admin.

[Milouze14]

Hello Grego63,
afin d'avoir une couleur de fond,
ajoutes ceci dans ta feuille de style:

Code:

ul#modernbb-nav-menu
{   
background-color: #848484;
text-align: center;
}

a++

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Grego63]

Merci de votre aide.

J'ai mis la couleur du fond gris, mais quand je mets le code pour mettre le fond noir ça ne fonctionne pas,  je ne comprends pas pourquoi.

Cordialement.

[MlleAlys]

Bonjour,
Quel est le contenu actuel de votre css ?
Vous pouvez essayer de remplacer les codes ajoutés jusque là par ceux-ci :

Code:

/************** BARRE DE NAVIGATION *******************/

.navbar img {
    width: 20px;  /*largeur max des images*/
    height: 20px;  /*hauteur max des images*/
    object-fit: contain;
    filter: none;
    margin: 0;
}
.navbar a {
    border-radius: 0;
    background: #ffffffdb;   /*couleur de fond des boutons*/
    padding: 10px;   /*marge autour des images*/
}
.navbar li {
    margin: 0;
}
.navbar a:hover {
    background: #0359c2;  /*couleur de fond au survol*/
}
.navbar a:hover img {
    filter: invert(1) grayscale(1);  /*pour inverser la couleur de l'image au survol (possible de supprimer la ligne)*/
}
/*************** FIN BARRE DE NAVIGATION *****************/

Ce qui devrait donner ça, avec un fond bleu au survol :


J'ai mis des commentaires dans le code pour vous indiquer les endroits faciles à personnaliser, si vous voulez mieux comprendre ou modifier autre chose n'hésitez pas.

Si ça ne vous convient pas, pourriez vous préciser l'apparence souhaitée ?

[Grego63]

Cela ne fonctionne pas, je suis novice.

J'ai supprimé les commentaires mais j'ai dû faire une erreur.

Puis-je avoir le code sans les commentaires.

Merci bien.

Cordialement.

[MlleAlys]

Le mieux est encore de copier/coller le code sans le modifier dans un premier temps pour savoir s'il fonctionne. Puis si besoin le modifier seulement dans un second temps.
Si déjà il ne fonctionne pas tel quel, c'est sans doute que vous avez une erreur plus haut dans votre feuille de style, qui fausse sa lecture. Dans ce cas, il vous faudrait la partager pour que l'on puisse voir ce qu'il en est.

Version sans commentaires :

Code:



 
.navbar img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: none;
    margin: 0;
}
.navbar a {
    border-radius: 0;
    background: #ffffffdb;  
    padding: 10px;  
}
.navbar li {
    margin: 0;
}
.navbar a:hover {
    background: #0359c2;  
}
.navbar a:hover img {
    filter: invert(1) grayscale(1);  
}





[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[MlleAlys]

ça a l'air résolu sur son forum en fait... (ça fait toujours plaisir )

[Grego63]

Bonjour, merci pour le code de @MllsAlys, ça à fonctionner mais cache le logo de ma bannière je ne sais pas comment faire.

Cordialement.

[MlleAlys]

Beaucoup de choses sont possibles, tout dépend de ce que vous souhaitez, par exemple :
- remettre le menu aligné à droite ?
- l'afficher plus petit pour qu'il prenne moins de place ?
- le coller au bord de l'écran ?
- l'afficher sur plusieurs lignes ?
- l'afficher à la verticale plutôt qu'à l'horizontale ?


Par exemple, pour l'afficher à la verticale à gauche de l'écran :
- ajoutez le code css suivant :

Code:

.navbar {
  position: fixed;
  left: 10px;
  top: 0;
  padding-top: 55px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

- Localisez le code suivant que vous avez déjà :

Code:

.navbar li {
  margin: 0;
}

Et complétez-le ainsi :

Code:

.navbar li {
  margin: 0;
  width: max-content;
}

- enregistrez.

Bref, tout dépend de ce que vous souhaitez avoir. D'autres modifications sont également possibles en modifiant le template.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.