Burger zone cliquable trop petite

Question

https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/

Pour la taille de mon site Web mobile icône burger pour le menu a une trop petite zone cliquable, il est seulement ces lignes minces.

J'ai aussi ce problème avec d'autres ancres que je voudrais avoir avec une plus grande zone cliquable, mais je ne veux pas que l'élément lui-même devienne plus grand sur ma page.

<div id="burger-container"> 
     <div id="burger"> 
      <span>&nbsp;</span> 
      <span>&nbsp;</span> 
      <span>&nbsp;</span> 
     </div> 
    </div> 

CSS

#burger-container{ 
margin: 25px 0 0 0; 
width: 50px; 
float: right; 
padding-right: 70px; 
} 

#burger{ 
cursor: pointer; 
display: block; 
} 

#burger span{ 
background: black; 
display: block; 
width: 50px; 
height: 3px; 
margin-bottom: 10px; 
position: relative; 
top: 0; 
transition: all ease-in-out 0.4s; 
} 

#burger-container.open span:nth-child(2){ 
width: 0; 
opacity: 0; 
} 

#burger-container.open span:nth-child(3){ 
transform: rotate(45deg); 
top: -13px; 
} 

#burger-container.open span:nth-child(1){ 
transform: rotate(-45deg); 
top: 13px; 
} 

} 

Answer 1

essayer d'ajouter une largeur et une hauteur

#burger { 
    cursor: pointer; 
    display: block; 
    height: 30px; 
    width: 50px; 
} 

Answer 2

Vous pouvez modifier le CSS comme ceci:

#burger{ 
    display: none; 
    padding: 23px 15px 10px; 
} 

@media all and (max-width: 580px){ 

    #burger-container{ 
     float: right; 
    } 

    #burger{ 
     cursor: pointer; 
     display: block; 
    } 
} 

De cette façon, vous qu'afficher la menu burger lorsque la largeur de l'écran est de 580px ou moins et le rembourrage vous donne une plus grande zone de clic.

Voir par exemple codepen.

Ceci est une meilleure pratique à mon avis, car vous n'avez pas à jouer avec la définition d'une largeur et hauteur spécifique, il suffit de jouer avec le padding.