Faire disparaître icône menu hamburger version mobile

[djinn99]

Bonjour,
J'utilise un autre module menu que celui intégré à Joomla pour afficher mon menu. En version mobile, je n'arrive malheureusement pas à faire disparaître l'icône du menu "hamburger" (class navbar btn-navbar) qui s'affiche comme version réduite du menu standard de joomla. J'aimerais la faire disparaître parce qu'elle ne sert à rien. D'ailleurs le module menu de joomla n'est pas activé, je ne comprends pas pourquoi cette icône apparaît. C'est une espère de petit carré blanc avec trois barres horizontales.
J'ai essayé de le faire disparaître avec une surcharge css mais rien n'y fait.
Quelqu'un a une idée ??
Merci
djinn

[dolmenhir]

Re : Faire disparaître icône menu hamburger version mobile

Salut,

Il y a de forte chance que cela soit géré automatiquement par ton template qui fait appel à des feuilles de style bootstrap (navbar et btn-navbar c'est typique de boostrap).

Quel est ton template ?

Dol.

[djinn99]

Re : Faire disparaître icône menu hamburger version mobile

C'est protostar

[ced1870]

Re : Faire disparaître icône menu hamburger version mobile

salut
il te faut éditer le fichier index.php, dedans tu trouveras le code html qui affiche l'icone de menu mobile
il suffit de virer le code
CEd

[dolmenhir]

Re : Faire disparaître icône menu hamburger version mobile

Faut que tu te crées une feuille de style personnalisée que tu dois nommer user.css et que tu places dans le dossier css du template (templates/protostar/css).

et tu écris ce style

@media (max-width: 979px)
.navbar .btn-navbar {
    display: none;
}

Cette méthode ne modifie rien de l'original mais ajoute une surcouche en écriture sur la feuille de style.
C'est net, propre et sans bavure.

Dol.

[djinn99]

Re : Faire disparaître icône menu hamburger version mobile

Faut que tu te crées une feuille de style personnalisée que tu dois nommer user.css et que tu places dans le dossier css du template (templates/protostar/css).

et tu écris ce style

@media (max-width: 979px)
.navbar .btn-navbar {
    display: none;
}

Cette méthode ne modifie rien de l'original mais ajoute une surcouche en écriture sur la feuille de style.
C'est net, propre et sans bavure.

Dol.

Merci, j'ai utilisé cette deuxième méthode et ça marche effectivement. J'ai juste rajouté deux parenthèses après la entre la condition de l'affichage mobile et la déclaration des classes. Comme ceci :

@media (max-width: 979px) {
.navbar .btn-navbar {
/*display: none;*/
}
}

Par contre, je viens de me rendre compte que le bouton menu hamburger du module Maximenu que j'utilise disparaît alors aussi. En version mobile, je devais effectivement cliquer sur le bouton hamburger du menu standard de joomla (que je n'utilise pas donc) pour faire apparaître le bouton menu hamburger du module Maximenu CK. J'avais oublié de le dire, désolé.
Je suis coincé...

[dolmenhir]

Re : Faire disparaître icône menu hamburger version mobile

Merci, j'ai utilisé cette deuxième méthode et ça marche effectivement. J'ai juste rajouté deux parenthèses après la entre la condition de l'affichage mobile et la déclaration des classes. Comme ceci :

@media (max-width: 979px) {
.navbar .btn-navbar {
/*display: none;*/
}
}

Tu as bien fais. J'ai en effet oublié de les mettre.

Par contre, je viens de me rendre compte que le bouton menu hamburger du module Maximenu que j'utilise disparaît alors aussi. En version mobile, je devais effectivement cliquer sur le bouton hamburger du menu standard de joomla (que je n'utilise pas donc) pour faire apparaître le bouton menu hamburger du module Maximenu CK. J'avais oublié de le dire, désolé.
Je suis coincé...

Il y a surement moyen de cibler finement le menu à faire disparaître juste avec les css.
Seulement il va falloir que tu identifies les class et les tags autour de l'un et l'autre des menus afin de repérer les différences et écrire la bonne class.
Si tu avais un lien à me donner pour que je regarde moi-même, ça ne me prendra pas longtemps.
Sinon, si tu peux coller une partie du code...

Dol.

[djinn99]

Re : Faire disparaître icône menu hamburger version mobile

Seulement il va falloir que tu identifies les class et les tags autour de l'un et l'autre des menus afin de repérer les différences et écrire la bonne class.
Si tu avais un lien à me donner pour que je regarde moi-même, ça ne me prendra pas longtemps.
Sinon, si tu peux coller une partie du code...

Si je ne me trompe, la classe de l'icône du menu hamburger du maximenu ck que j'utilise est .maximenumobiletogglerck. J'ai un peu de mal à y voir clair. Mon maximenu ck et celui du template de base de joomla sont dans des div bien séparés et appartiennent à des modules distincts. Je crois qu'ils partagent des classes communes comme nav-collapse et que celle-ci passe en overflow:visible lorsqu'on clique sur le bouton du menu hamburger mais je n'en suis pas sûr du tout et je pense que d'autres propriété css changent aussi. N'y a-t-il pas du jquery là-dedans? Je n'y connais rien.

Ce serait très gentil à vous si vous pouviez jeter un coup d'oeil : voici le site http://www.emile-max.be/
Vous pouvez faire le test avec un affichage de 400 px de large environ, pour les terminaux mobiles. L'icône du menu hamburger de joomla est blanche et il faut cliquer dessus pour faire apparaître la bande bleue du menu maximenu ck que j'utilise avec son icône hamburger avec trois traits blancs à gauche également.
Merci!

[ced1870]

Re : Faire disparaître icône menu hamburger version mobile

Par contre, je viens de me rendre compte que le bouton menu hamburger du module Maximenu que j'utilise disparaît alors aussi.

le plugin maximenu mobile intègre ce qu'il faut pour cacher automatiquement l'icône hamburger de Protostar. Je suis étonné que tu sois face à ce souci.
As-tu une url pour voir le problème ? quelles versions de maximenu + plugin mobile utilises-tu ?

[dolmenhir]

Re : Faire disparaître icône menu hamburger version mobile

Ce serait très gentil à vous si vous pouviez jeter un coup d'oeil : voici le site http://www.emile-max.be/
Vous pouvez faire le test avec un affichage de 400 px de large environ, pour les terminaux mobiles. L'icône du menu hamburger de joomla est blanche et il faut cliquer dessus pour faire apparaître la bande bleue du menu maximenu ck que j'utilise avec son icône hamburger avec trois traits blancs à gauche également.
Merci!

Tu as globalement un problème avec ce menu.
Normalement, un système responsive est conçu afficher un menu "hamburger" au même moment où il masque le menu standard.
Or, sur ton site, le menu disparait bien avant.
pire, le menu Hamburger de ton menu CK n'apparait que si on clique sur le menu hamburger de Protostar.

Mais le navbar du menu CK est imbriqué dans celui de protostar donc, dépendant de l'affichage de la class .navbar

Essaye de remplacer le code que je t'ai donné au début par

@media (max-width:979px) {
.navbar.pull-left > .btn.btn-navbar {
    display: none;
}
}

ça ne devrait faire disparaître que le ".btn.navbar" qui succède immédiatement à .navbar.pull-left

Mais juste une question supplémentaire à celles posées précédemment par ced :
Pourquoi tu utilises menu CK alors que tu pourrais faire pratiquement la même chose avec le menu natif de Joomla ?

Dol.

[ced1870]

Re : Faire disparaître icône menu hamburger version mobile

Pourquoi tu utilises menu CK alors que tu pourrais faire pratiquement la même chose avec le menu natif de Joomla ?

pas tout à fait non il y a bien plus de fonctionnalités

mais sur ce site je viens de vérifier et maximenu mobile n'est pas actif. Es-tu sur d'avoir activé le plugin ?

[djinn99]

Re : Faire disparaître icône menu hamburger version mobile

le plugin maximenu mobile intègre ce qu'il faut pour cacher automatiquement l'icône hamburger de Protostar. Je suis étonné que tu sois face à ce souci.
As-tu une url pour voir le problème ? quelles versions de maximenu + plugin mobile utilises-tu ?

Bonjour,
Voici le lien vers le site : http://www.emile-max.be/

C'est la version 8.2.3 de Maximenu CK. J'ai beau regarder dans les options, je ne vois pas ce qui me permettrait de changer ça mais je dois dire que je n'ai installé que la version gratuite, dans les options, il est indiqué qu'il y a la possibilité de télécharger le plugin Maximenu mobile pour activer la gestion Mobile, ce que je n'ai pas fait. Peut-être le paramétrage dont vous parlez se situe à ce niveau?

[dolmenhir]

Re : Faire disparaître icône menu hamburger version mobile

pas tout à fait non il y a bien plus de fonctionnalités

oui, je sais bien, mais en l'état, sur son site, il n'exploite pas toute la richesse de l'outil.
C'est dommage de se doter d'un outil comme ça pour ne rien faire de plus que ce que l'on peut faire sans.
C'est ce je que je voulais souligner.

[djinn99]

Re : Faire disparaître icône menu hamburger version mobile

pas tout à fait non il y a bien plus de fonctionnalités

mais sur ce site je viens de vérifier et maximenu mobile n'est pas actif. Es-tu sur d'avoir activé le plugin ?

Je viens de lire votre réponse maintenant, désolé. Oui pour répondre à Dolmenhir, j'avais installé Maximenu CK pour avoir plus d'options d'effets et de style pour mon menu, notamment l'effet "glissé" de la couleur dans la sélection du menu au survol de la souris. J'avais trouvé à l'époque que le menu de base de protostar était trop statique. Maintenant je suis novice et j'avoue ne pas avoir passé des heures à chercher dans les tutoriels ou la documentation pour y parvenir, peut-être qu'en cherchant davantage je serais parvenu à un résultat satisfaisant aussi avec le menu de protostar.
Je m'occupe de la maintenance informatique dans une école et je n'ai pas eu beaucoup l'occasion de s intéressé très longuement à la version mobile du site, mais voilà cette année c'est le centenaire et pas mal de monde risque de s'intéresser à nos activités et utiliser son mobile pour visiter le site, donc je veux l'améliorer.

[djinn99]

Re : Faire disparaître icône menu hamburger version mobile

Tu as globalement un problème avec ce menu.
Normalement, un système responsive est conçu afficher un menu "hamburger" au même moment où il masque le menu standard.
Or, sur ton site, le menu disparait bien avant.
pire, le menu Hamburger de ton menu CK n'apparait que si on clique sur le menu hamburger de Protostar.

Mais le navbar du menu CK est imbriqué dans celui de protostar donc, dépendant de l'affichage de la class .navbar

Essaye de remplacer le code que je t'ai donné au début par

@media (max-width:979px) {
.navbar.pull-left > .btn.btn-navbar {
    display: none;
}
}

Dol.

Je viens de le faire. Malheureusement, en version mobile plus rien ne s'affiche alors...