[Stéphanie Stracquadanio]

Hi!

 

I’ve modified my top bar in order to add a phrase in front of my social icons in the top bar.

That modified part stays light when dark mode is on.

Could you please help?

This is my custom css:

/* Style de la top bar */

.top-bar {

display: flex; /* Active un affichage en ligne */

justify-content: space-between; /* Sépare les éléments à gauche et à droite */

align-items: center; /* Aligne verticalement au centre */

background-color: #333; /* Couleur de fond */

color: #fff; /* Couleur du texte */

padding: 10px 20px; /* Espacement intérieur */

font-size: 14px;

}

 

/* Texte à gauche */

.top-bar-left {

text-align: left; /* Aligne le texte à gauche */

}

 

/* Icônes à droite */

.top-bar-right {

display: flex; /* Assure un bon affichage en ligne des icônes */

gap: 10px; /* Espacement entre les icônes */

}

/* Conteneur principal de la top bar */

.top-bar-content {

display: flex; /* Active un affichage en ligne */

justify-content: space-between; /* Sépare les éléments à gauche et à droite */

align-items: center; /* Centre verticalement */

background-color: #FFFFFF; /* Fond sombre */

color: #000000; /* Texte blanc */

padding: 10px 20px; /* Espacement intérieur */

font-size: 14px;

}

 

/* Texte de gauche */

.top-bar-left {

text-align: left;

font-weight: 500; /* Optionnel : mettez en gras si nécessaire */

}

 

/* Icônes sociales à droite */

.top-bar-right {

display: flex;

gap: 10px; /* Espacement entre les icônes */

}

/* Par défaut (mode clair) */

#top-bar {

background-color: #fff; /* Fond blanc */

color: #333; /* Texte noir */

}

 

.top-bar-right a {

color: #333; /* Liens en noir */

}

 

.top-bar-right a:hover {

color: #ff6f61; /* Couleur au survol */

}

 

/* Mode sombre activé */

body.dark-mode #top-bar {

background-color: #333; /* Fond sombre */

color: #fff; /* Texte blanc */

}

 

body.dark-mode .top-bar-right a {

color: #fff; /* Liens en blanc */

}

 

body.dark-mode .top-bar-right a:hover {

color: #ff6f61; /* Couleur au survol */

}

#top-bar {

transition: background-color 0.3s ease, color 0.3s ease;

}

.top-bar-right a {

transition: color 0.3s ease;

}

@media (max-width: 480px) {

.top-bar-left {

display: none;

}

}

Thank you,

 

Best regards,

 

Stéphanie.

 

 

 

[Author]

Posts