Hello
I created a simple CSS hamburger menu for smartphone view. Link: https://zellkraft.ch/gesundheitsberatung.php
The menu works fine but the click area ist too large. The menu opens even if i klick horizontal aside the 3 lines. What could be the problem?
my HTML code:
my CSS code:
I created a simple CSS hamburger menu for smartphone view. Link: https://zellkraft.ch/gesundheitsberatung.php
The menu works fine but the click area ist too large. The menu opens even if i klick horizontal aside the 3 lines. What could be the problem?
my HTML code:
HTML:
<input type="checkbox" id="click">
<label for="click">
<div class="hamburger">
<div class="hamlinien linie1"></div>
<div class="hamlinien linie2"></div>
<div class="hamlinien linie3"></div>
</div>
</label>
<ul class="ganzesmainmenu">
<li class="mainmenu versteckt"><a href="gesundheitsberatung.php" class="versteckt">Gesundheitsberatung</a></li>
<li class="mainmenu"><a href="elektrosmog.php">Elektrosmog</a></li>
<li class="mainmenu"><a href="hautgesundheit.php">Hautgesundheit</a></li>
<li class="mainmenu"><a href="asea-amriswil.php">ASEA</a></li>
<li class="mainmenu"><a href="bemer-amriswil.php">BEMER</a></li>
<li class="mainmenu"><a href="gabriela-haeni.php">Über mich</a></li>
<li class="mainmenu"><a href="kontakt.php">Kontakt</a></li>
<li class="mainmenu"><a href="gesundheit-links.php">Links</a></li>
</ul>
my CSS code:
CSS:
@media (max-width: 479px) {
ul {
display:none;
margin-top:60px;
}
#click {display:none;}
#click:checked ~ ul {display:block;}
#click:checked ~ label .linie2 {opacity:0;}
#click:checked ~ label .linie1 {transform:rotate(-45deg); top:30px; transition: transform 0.4s;}
#click:checked ~ label .linie3 {transform:rotate(45deg); top:30px; transition: transform 0.4s;}
.hamlinien {
width:40px;
height:4px;
background-color:black;
border-radius:4px;
position:absolute;
}
.linie1 {
top:12px;
}
.linie2 {
top:28px;
}
.linie3 {
top:44px;
}
.hamburger {
width:60px;
height:60px;
border-radius:4px;
padding-left:10px;
padding-right:10px;
margin-top:-20px;
margin-bottom:-30px;
position:relative;
display:inline-block;
}
}