Witam :)
napotkałem problem bo chciałem zrobić sobie hamburger menu z użyciem checkboxa no i wszystko pięknie ładnie ale niewiem jak ustawić aby lista wyświetlała się pod headerem i jak toostylować w scss. Zapewne jakiś problem w strukturze html że lista powinna być pod headerem alepotem jak przedostać się żeby po zaznaczeniu labela od inputa checkbox ta lista się wyświetlała, bo label jest float right i lista też poszła na prawo a chcę w widoku mobilnym aby było 100% szerokości.
<div class="wrap">
<header class="top-banner">
<hgroup class="main-header">
<h1>Burning Stone</h1>
</hgroup>
<nav class="main-navigation">
<label for="hamburger"><img src="img/icon/hamburger.png" alt=""></label>
<input type="checkbox" id="hamburger">
<ul class="navigation-list">
<li><a href="#">Main Page</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Donate Us</a></li>
</ul>
</nav>
</header>
</div>
a tu scss
header.top-banner {
@include clearfix;
background-color: $mainColor;
padding: 5pX 10pX;
hgroup.main-header {
float: left;
width: calc(100% - 60pX);
h1 {
font-size: 50pX;
}
}
nav {
float: right;
width: 55pX;
label {
img {
width: 100%;
display: block;
}
}
input[type=checkbox] {
display: none;
&:checked ~ ul.navigation-list {
display: block;
}
}
ul.navigation-list {
display: none;
}
}
}