Problème place menu hamurger sur smartphone

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)

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

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)