Problème place menu hamurger sur smartphone

Bonjour,
je suis en train de créer un site web :
http://www.cabinet-focus.fr/
pour ecran pc, tablette pas de problème. Pour les smartphones, le menu se coince à droite, et le sous menu est illisible. J'ai tout essayé , je n'y arrive pas .
Je vous donne l'adresse de la page css pour information. Merci de me dire ce qu'il faut modifier, n'étant pas webmaster comme vous tous.
http://www.cabinet-focus.fr/assets/css/style.css
Merci de vos réponse
Modifié par fanny64 (29 Jul 2016 - 12:42)

Bonjour !

Vous dire où on se situe le problème, ça c'est relativement rapide :
le div qui a pour id 'nav-bar' est en float : right. C'est pour cela qu'il se place sur le bord droit de la fenêtre.

Les sous-menus sont illisibles car ils sont en position : absolute. Les autres éléments de la page ne leur laissent pas de place lorsqu'ils apparaissent.

Le premier problème n'est pas trop difficile à régler mais le deuxième est plus délicat : ce n'est pas pour rien que les sous-menus sont en position : absolute. C'est pour se placer sous les éléments du menu.

Marrant, le cactus...

Concrètement, j'ai pas tout compris ...
Je suis allé dans la page css, j'ai cherché un float : right et j'ai pas trouvé ...
idem pour le sous menu en absolute..
Donc, je sais pas où et quoi modifier.
Le cactus, c'est une idée de ma femme. Elle me dit ce qu'elle veut et j'essaie de faire .

Bonjour,

La règle float:right n'est pas dans ton css c'est normal. Elle se situe dans le fichier bootstrap.min.css sur la class .pull-right.
Le problème ne vient pas tout à fait de cette règle mais du fait que tu as mis cette class dans ton html sur ton élément #navbar. Or ce n'est pas la bonne manière de procéder dans ce cas là.
Il faut donc que tu retires la class "pull-right" sur ton élément html #navbar. Et que tu appliques des styles dans le css selon si c'est un mobile ou pas, à l'aide de media-queries.

Par contre, est-ce que tu as pris un thème tout fait ? Ou est-ce que c'est toi qui a codé le html / css du site ?
Car si tu as pris un thème tout fait, ne touche pas au html, tant pis, il sera plus judicieux de travailler sur des règles supplémentaires en css pour annuler les comportements qui ne te conviennent pas dans le visuel.

D'accord, alors rajoute à la fin de ton fichier css ceci :

@media (max-width: 768px) {
    div[id="navbar"].pull-right {
        float: none !important;
    }
}

Modifié par Raphi (29 Jul 2016 - 15:22)

voila, c'est fait, le menu est plus décalé vers la droite, c'est bcp mieux, par contre les sous menu sont illisibles ( ils l'etaient avant)

Pour le problème du sous-menu tu peux placer ce code à l'intérieur de ta déclaration de média-queries que je t'ai fait écrire juste avant :

.navbar-main .submenu {
    position: static;
    visibility: inherit;
    width: auto;
    display: none;
}

.navbar-main li:hover .submenu {
    display: block;
}

.submenu .nav-tabs {
    margin-bottom: 0;
}

.submenu .nav-tabs > li {
    float: none;
}

C'est pas l'idéal d'ouvrir tes sous-menus grâce au hover, mais c'est plus lisible en attendant.

Voila ce que tu peux faire pour solutionner l'ouverture des menus au clic.
Ajoute ceci à la fin de ton fichier html (juste avant la fermeture de la balise body), ou dans un fichier externe js (si tu choisi cette solution, retire les balises script et n'oublie pas d'appeler ce fichier dans ton template html) :

<script>
$('.nav.navbar-nav > li').click(function(e) {
  if ($(this).children('.submenu').length) {
    e.preventDefault();
    $(this).find('.submenu').slideToggle(200);
  }
});
</script>

Et dans ton fichier css, tu supprimes la partie suivante que je t'ai fait écrire :

.navbar-main li:hover .submenu {
    display: block;
}

L'avantage de cette solution, c'est qu'elle est pleinement compatible avec un mobile (le hover n'existe pas sur mobile).
Par contre cela s'applique sur l'ensemble des écrans, peu importe que ça soit un mobile ou non.
Si un item, qui possède un sous-menu, renvoi sur une autre page, le lien ne fonctionnera plus avec cette méthode.
Modifié par Raphi (29 Jul 2016 - 16:32)

j'ai choisi ta 1ere solution , et ça fonctionne !!! je te remercie beaucoup !!!

MERCI MERCI MERCI

En fait je me suis emballé, ça marche pas...
si je met la 1ere solution, sur mobile ça marche bien , mais sur mon pc, mes sous menus font bouger ma page ...
si je mets la 2eme solution, j'ai plus de sous menu sur smartphone ni sur pc ..
ALors je bloque

non ça marche pas...voir le message suivant

fanny64 a écrit :
si je met la 1ere solution, sur mobile ça marche bien , mais sur mon pc, mes sous menus font bouger ma page ...

Tu as ce problème parce qu'il faut mettre le code dans la condition média queries, celle-ci :

@media (max-width: 768px)

Entre l'accolade ouvrante et fermante comme dans l'exemple précédent.
Si tu ne fais pas ça, le navigateur interprétera tout le temps le code, alors qu'il ne doit être interprété que lorsque l'écran est inférieur à 768px de large.

Pour la 2e solution tu as bien placé le code dans le HTML ?

j'ai pris la 2eme solution, j'ai mis le css que tu m'as donné , le voici dans la page style.css, j'ai rajouté et enlevé le bout de code au niveau des ecran 768px :

/* Small devices (tablets, 768px and Down) */
@media (max-width: 768px)

div[id="navbar"].pull-right {
float: none !important;
}

.navbar-main .submenu {
position: static;
visibility: inherit;
width: auto;
display: none;
}

.submenu .nav-tabs {
margin-bottom: 0;
}

.submenu .nav-tabs > li {
float: none;
}




.carousel-home img {
width: 80%;
}

{
.header-contact {
text-align: center;
}
.header-contact li {
margin: 0 !important;
}

.header-social {
text-align: center;
}

.navbar-main #navbar {
float: none;
}
.navbar-main #navbar a {
border-bottom: none;
}
.navbar-main .navbar-brand {
padding: 6px 15px;
}
.navbar-main .submenu {
position: initial;
display: none;
width: 100%;
}
.navbar-main li:hover .submenu,
.navbar-main li:active .submenu,
.navbar-main li:focus .submenu {
display: block;
}
.navbar-main li:hover .submenu li,
.navbar-main li:active .submenu li,
.navbar-main li:focus .submenu li {
background: #ab979e;
border-top-color: #ab979e;
}


.carousel-home .carousel-title {
font-size: 32px;
}
.carousel-home .carousel-subtitle {
font-size: 16px;
}
.carousel-home .carousel-control {
background: #1f76bd;
height: 40px;
width: 20px;
top: 50%;
margin-top: -20px;
}
.carousel-home .carousel-control .fa {
font-size: 1.5em;
padding-top: 4px;
}

.col-form {
margin-bottom: 25px;
}
}

et j'ai ajouté le script avant la balise body dans ma page index.html

Conclusion: sur smartphone c'est ok.
Sur pc : le sous menu ne s'affiche pas au passage de la souris, il faut cliquer dessus, et là ça decale tout vers le bas ...Moi je veux un hover pour afficher le menu...

???

j'ai refais exactement ce que tu as dis ...
sur pc et smartphone, le menu et sous menu s'affiche bien, mais maintenant , qd il n'y a pas de sous menu (exemple tarifs, la page tarifs s'ouvre), mais si le menu a un sous menu, celui-ci s'affiche mais n'est pas cliquable ( comme le menu du sous menu)
Essaie tu verras.
Désolé de ma nullité...

Y a pas de soucis t'en fais pas.
Concernant ton menu il faut que tu vois ça différemment. Normalement sur mobile, le hover ne fonctionne pas (c'est pas tout à fait vrai mais le comportement ne sera pas homogène sur tous les téléphones, et quoi qu'il arrive c'est la galère à utiliser).
Il faut donc favoriser l'ouverture du sous-menu au clic. Le problème de ça c'est qu'on ne peux pas mettre de lien sur l'élément qui ouvre le sous-menu.
Donc il faut que ces items qui possèdent des sous-menus, tu leur enleves leur lien. À toi de refaire ton organisation de pages du menu pour que ça colle à ce nouveau fonctionnement.

Dans l'etat actuel, tu ne peux pas avoir du hover en version normale et du clic en version mobile. Il faut donc privilégier le clic pour la compatibilité.
Modifié par Raphi (30 Jul 2016 - 09:27)

Oups ya une erreur dans le script que je t'ai fait, on ne peux pas cliquer sur un élément du sous-menu ça n'ouvre pas la page (c'est sûrement ça que tu voulais me dire ).
Voici le script mis à jour :

$('.nav.navbar-nav > li > a').click(function(e) {  
  if ($(this).next().hasClass('submenu')) {
    e.preventDefault();
    $(this).next().slideToggle(200);
  }
});

Par contre il faut que tu mette le script JS sur toutes les pages de ton site, sinon ton menu fonctionnera que sur ta page d'accueil.

edit: et il faut aussi sortir ces 2 règles css (que je t'ai fait écrire) de la condition media queries :

.navbar-main .submenu {
    visibility: inherit;
    display: none;
}

.navbar-main li:hover .submenu {
    display: block;
}

Ça devrait être plus correct (ça retirera l'ouverture au hover)... En espérant que cette fois-ci ça soit la bonne.
Modifié par Raphi (30 Jul 2016 - 18:42)

En résumé,
je teste juste sur la page index.html

J'ai mis le nouveau script avec la balise /body dans la page index, le voici:

<script>
$('.nav.navbar-nav > li > a').click(function(e) {
if ($(this).next().hasClass('submenu')) {
e.preventDefault();
$(this).next().slideToggle(200);
}
});
</script>

Puis dans la page style.css
j'ai mis :

@media (max-width: 768px) {
div[id="navbar"].pull-right {
float: none !important;
}

navbar-main .submenu {
position: static;
visibility: inherit;
width: auto;
display: none;
}



.submenu .nav-tabs {
margin-bottom: 0;
}

.submenu .nav-tabs > li {
float: none;
}
}

Au niveau pc : pas de soucis de modification de la page au niveau du menu, les sous memus fonctionnent...mais le menu direct ne fonctionne pas , c'est a dire , au niveau du menu, redaction ( normalement il envoie sur redaction.html , idem correction, idem réécriture) et ça marche pas.
Au niveau samrtphone, place du menu ok, lisibilité ok, mais meme probleme que sur pc...

J'ai mal recopie le code ??

fanny64 a écrit :
le menu direct ne fonctionne pas , c'est a dire , au niveau du menu, redaction ( normalement il envoie sur redaction.html , idem correction, idem réécriture) et ça marche pas.

Ça c'est parfaitement normal, c'est ce que je t'expliquai dans un commentaire précédent entre le clic et le hover. Mais le problème c'est que tu as du retoucher au css parce que le résultat n'est pas bon, notamment en version mobile où on retrouve l'ancien fonctionnement. De plus, il ne devrait plus y avoir de hover.

Effaces tout ce que je t'ai fais écrire dans le css et recommence avec ce code précisément:

.navbar-main .submenu {
  visibility: inherit;
  display: none;
  top: auto;
}

.submenu .nav-tabs {
  margin-bottom: 0;
}

.has-child > a:before {
  content:"\f107";
  font-family: "FontAwesome";
  position: absolute;
  right: 3px;
  top: 50%;
  margin-top: -9px;
  font-size: 12px
}

@media (max-width: 768px) {
  div[id="navbar"].pull-right {
    float: none !important;
  }

  .navbar-main .submenu {
    position: static;
    width: auto;
  }

  .submenu .nav-tabs > li {
    float: none;
  }

  .has-child > a:before {
    right: 25px;
  }
}

Concernant le js ça a l'air d'être bon.
Modifié par Raphi (01 Aug 2016 - 11:42)

je viens de recopier le css
... non ça marche pas

je t'explique , le menu: avant qd tu passais la souris sur redaction, le sous menu s'ouvrait , là il faut cliquer, le sous menu apparait et c'est cliquable. ( pas tres pratique)
et secondo, comme tout a l'heure, la page, avec des sous menus, le lien ne focntionne pas :
exemple redaction vers redaction.html, meme en cliquant dessus, normal car qd tu cliques dessus ça ouvres le sous menu...