css - Burger menu clickable area too small -
https://codepen.io/everybodysfeelingwonderland/full/ojyrpm/
for mobile size of website burger icon menu has way small clickable area, thin lines.
i have problem other anchors i'd have bigger clickable area, don't want element become bigger on page.
<div id="burger-container"> <div id="burger"> <span> </span> <span> </span> <span> </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: 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; } }
try adding fixed width , height
#burger { cursor: pointer; display: block; height: 30px; width: 50px; }
Comments
Post a Comment