Burger-Menü klickbaren Bereich zu klein

Question

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

Für die mobile Größe meiner Website meines Burger Symbol für das Menü ein viel zu klein klickbaren Bereich hat, ist es nur die dünnen Linien.

Ich habe auch dieses Problem mit anderen Ankern, die ich mit einem größeren anklickbaren Bereich haben möchte, aber das Element selbst soll auf meiner Seite nicht größer werden.

<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

try feste Breite und Höhe Hinzufügen

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

Answer 2

Sie die CSS wie so ändern können:

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

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

    #burger-container{ 
     float: right; 
    } 

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

Sie sind die einzige Anzeige Auf diese Weise Burger-Menü, wenn die Bildschirmbreite 580px oder ist weniger und die Polsterung gibt Ihnen eine größere Klickfläche.

Siehe zum Beispiel codepen.

Dies ist eine bessere Übung meiner Meinung nach, weil Sie nicht mit dem Einstellen einer bestimmten Breite und Höhe zu verwirren, nur mit der padding spielen müssen.