[RÉGLÉ] Icône menu 3 traits invisible (mobile)

[hervelam]

Bonjour,

J'ai mis à jour tant bien que mal mon template à la sauce Joomla 4, dérivant de Cassiopeia, et il me semble maintenant à peu près satisfaisant... en version PC
Mais je me heurte à un problème quand je regarde mon site sur smartphone : l'icône menu (le bouton gris à 3 traits, que certains appellent "hamburger"), à droite de mon logo "japprecie", n'apparaît pas !
Comme si elle était en blanc sur fond blanc. Je suis sûr qu'elle y est pourtant, parce qu'on peut cliquer dessus, et alors il y a bien tout le menu qui apparaît.
Que faire ?

De manière générale,

• comment "déboguer" mon CSS sur smartphone ? (Sur PC, avec Firefox, facile, un petit coup de Maj+F12 et hop ! Mais sur smartphone, que faire ?)
• est-il possible/souhaitable d'avoir le même template Joomla pour PC et pour smartphone ?

En vous remerciant,
Hervé

[Helloo]

Bonjour,

Tu peux ajouter ce code dans ton fichier user.css

.navbar-toggler.navbar-toggler-right {
  color: #000;
  border-color: #000;
}​

[Visiteur]

Bonjour,

J'ai mis à jour tant bien que mal mon template à la sauce Joomla 4, dérivant de Cassiopeia, et il me semble maintenant à peu près satisfaisant... en version PC
Mais je me heurte à un problème quand je regarde mon site sur smartphone : l'icône menu (le bouton gris à 3 traits, que certains appellent "hamburger"), à droite de mon logo "japprecie", n'apparaît pas !
Comme si elle était en blanc sur fond blanc. Je suis sûr qu'elle y est pourtant, parce qu'on peut cliquer dessus, et alors il y a bien tout le menu qui apparaît.
Que faire ?

De manière générale,

• comment "déboguer" mon CSS sur smartphone ? (Sur PC, avec Firefox, facile, un petit coup de Maj+F12 et hop ! Mais sur smartphone, que faire ?)
• est-il possible/souhaitable d'avoir le même template Joomla pour PC et pour smartphone ?

En vous remerciant,
Hervé

ça fera plus propre de supprimer acy mail pour les écrans en dessous 422, en plus le bouton est coupé ;-)
.acym_module_form {
display: block;
}
.container-header .navbar-toggler {
border: 1px solid #000!important;
color: #000!important;
cursor: pointer;
margin: 15px;
}
@media screen and (max-width: 422px) {
.acym_module_form {
display: none!important;
}
}

[Visiteur]

Pour un truc pro j'aurai testé ça pour le background, après c'est ton choix :-)
body {
font-size: 13px;
line-height: 18px;
color: #959595;
background-color: white;
background: url("https://c0.wallpaperflare.com/preview/689/986/441/algeria-oran-music-fine-art.jpg") no-repeat top center fixed;
background-size: auto;
background-size: cover;
}

[hervelam]

Tu peux ajouter ce code dans ton fichier user.css

Ça marche ! Merci !
Hervé

[hervelam]

ça fera plus propre de supprimer acy mail pour les écrans en dessous 422, en plus le bouton est coupé ;-)

Oui c'est mieux comme ça, j'ai d'ailleurs adopté ta solution.
Sauf que... les visiteurs par smartphone ne peuvent maintenant plus s'abonner à ma newsletter.
Que faire ? Mettre le formulaire ailleurs ? Autrement ? Des idées, quelqu'un ?

En vous remerciant,
Hervé

[hervelam]

Pour un truc pro j'aurai testé ça pour le background, après c'est ton choix :-)

Merci pour l'idée ; je ne dis pas que je ne changerai pas un jour, mais pour l'instant je préfère garder mon image de fond.

Tant que j'y suis, je voudrais bien déplacer l'icône Facebook en-dessous des icônes de langues.

Déjà, j'ai réussi à mettre plusieurs éléments côte à côte dans la position topbar (en lui mettant la classe grid-child)... Mais je ne vois pas comment faire pour avoir 2 éléments l'un sous l'autre ?

En vous remerciant,
Hervé