[Résolu] Menu hamburger : comment augmenter la sensibilité en survol

Bonsoir,

J'ai créé un site depuis un theme qui propose, comme la majorité des thèmes, un menu hamburger (trois bandes).

Tout fonctionne mais pour déployer le menu, il faut survoler exactement l'icône hamburger, ce qui n'est pas très pratique.

L'icône n'est pas une image mais un pseudo-element (je ne suis pas certain d'avoir tout compris)

Est-il possible en CSS d'étendre la zone réactive de cette icône en hover, soit afficher le curseur main avant de parvenir à l'icône ?

Pour mon .mobile-menu, j'ai testé :

.mobile-menu a:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Mais ça ne fonctionne pas.

Hello,

Vu ton code, le contenu en before occupe toute la place de son conteneur (de haut en bas).
Donc, si tu agrandis les dimensions du lien <a> avec width/height ou du padding, tu agrandiras la zone réactive.

Merci pour ton retour mais en fait, je ne risquais pas de trouver la solution car le nom du style n'était pas le bon, il y tellement de code généré par le thème, je m'y perds un peu...

Bref, en creusant dans les CSS du thème, j'ai trouvé celui qui était dédié au hamburger et a priori, je peux augmenter le padding de .hamburger-box (Cf. ci-dessous), mais comme du coup ça va déplacer l'icône vers l'intérieur de ma page.
Je peux toujours tenter de recaler en réduisant margin mais je sens que ça ne va pas être très propre...

Pour infos, la totalité du code original (aucune modif) pour le hamburger.

.hamburger {
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

a:hover .hamburger {
  opacity: 0.7;
}

.hamburger-box {
  width: 20px;
  height: 16px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: 2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 20px;
  height: 2px;
  background-color: #000;
  border-radius: 3px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -7px;
}

.hamburger-inner::after {
  bottom: -7px;
}

Re,

et le html ? si possible ?

Pour le html, la partie menu est énorme, comme beaucoup de thèmes, et finalement, la modification de .hamburger-box fonctionne très bien.

Je ne vais donc pas te faire perdre plus de temps et te remercie sincèrement de m'avoir mis sur la piste !!!