Hamburger Menu HTML5 i Scss

Question

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;
    }
  }
}

 

Answer 1

W tym momencie zostawiasz dla całego 'nav' jedynie 60px (7 linijka). Wyciągnij input z 'nav' albo pobaw się flexbox-em (w ogóle olej float, są znacznie wygodniejsze sposoby, np flexbox).