<header>
  <h1><i class="fa fa-cogs"></i> Responsive Menu Demo</h1>
</header>
<nav>
  <input type="checkbox" id="mtoggler" hidden="hidden" />
  <label for="mtoggler" class="open" hidden="hidden"><span><i class="fa fa-bars"></i></span></label>
  <label for="mtoggler" class="close" hidden="hidden"><span><i class="fa fa-caret-square-up"></i></span></label>
  <ul>
    <li><a href="#"><i class="fa fa-fw fa-home"></i> Home</a></li>
    <li><a href="#"><i class="fa fa-fw fa-search"></i> Search</a></li>
    <li><a href="#"><i class="fa fa-fw fa-shopping-basket"></i> E-shop</a></li>
    <li><a href="#"><i class="fa fa-fw fa-file"></i> About Us</a></li>
    <li><a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a></li>

  </ul>
</nav>
<main>
  <p>Consequat facilisi tellus cum lobortis tempor natoque consequat ac netus sociosqu. Sodales id arcu sollicitudin lobortis mus bibendum ullamcorper. Congue enim tempor vulputate vel lacinia volutpat libero, parturient blandit imperdiet egestas porttitor! Mus lacinia pharetra tempor? Pretium fermentum nullam lectus blandit, nunc mus rutrum praesent. Curabitur viverra nisl eleifend, faucibus odio. Justo taciti maecenas tempus mattis. Dictumst bibendum dictum pretium eleifend inceptos auctor pharetra ipsum lorem odio, gravida tempus. Viverra nisi a venenatis sociosqu magnis commodo fusce mattis ligula curabitur sollicitudin? Aliquet torquent dictumst fames dis blandit! Consectetur vestibulum nisl eget eget! Cursus diam suscipit donec dui interdum mi aptent rutrum sapien et metus. Vivamus inceptos curae; nibh orci at enim molestie dolor erat nascetur risus praesent? Eget curabitur suspendisse fames. Massa, fames vehicula inceptos himenaeos diam id ullamcorper. Semper dapibus aptent magna nibh feugiat iaculis est faucibus quisque at. Dis augue suscipit adipiscing euismod eros. Lectus libero, malesuada.</p>
  <p>Gravida imperdiet fusce blandit mauris torquent metus curae; fringilla tortor ultrices! Imperdiet cubilia dis vulputate euismod! Pretium dictumst conubia facilisis ut per pulvinar adipiscing convallis vestibulum arcu quis! Ultricies curabitur lobortis auctor. Facilisi tempor enim rhoncus. Ornare iaculis hac tincidunt vehicula, luctus morbi. Nunc facilisi ultrices proin litora at pharetra fringilla scelerisque pharetra ante torquent. Dictum quisque proin vestibulum accumsan penatibus scelerisque cras metus. Morbi tincidunt odio a accumsan habitasse venenatis. Integer himenaeos dictum condimentum velit rutrum libero mollis facilisis sollicitudin sit suspendisse. In, est cras tristique. Nostra per netus sociosqu amet nostra. Molestie tristique in nunc purus tincidunt congue. Vel posuere lobortis placerat elementum dignissim metus augue convallis proin purus! Turpis vitae diam porttitor himenaeos odio nascetur eleifend iaculis. Integer duis leo ligula nunc pellentesque?</p>
  <p>Mattis, ultricies cursus sociosqu? Neque magnis sed conubia eros vivamus. Nam senectus netus sollicitudin purus eleifend nisl tincidunt felis. Praesent nulla orci porttitor venenatis. Amet lobortis tempus duis rhoncus. Nullam, consequat metus a penatibus felis. Pellentesque laoreet quam fringilla aliquam elit nostra nulla lobortis aliquam! Duis nisl, curabitur lacus urna commodo eget. Lorem lectus purus cursus purus hendrerit pellentesque quisque dictumst, mollis magnis tortor. Facilisis sociosqu fringilla dapibus ultricies mi faucibus, penatibus primis vivamus. Urna egestas habitant, per hac luctus. Fringilla aenean pretium eleifend arcu elit dictumst pretium. Id, platea mus proin.</p>
  <p>Cum mus facilisis nisi arcu vitae vehicula sit! Bibendum nostra placerat tristique varius volutpat aliquam quisque vivamus luctus praesent justo luctus. Vestibulum in ligula ad. Velit inceptos faucibus maecenas faucibus sed ad metus sapien consequat litora proin dictumst. Id neque cras erat maecenas sem natoque. Diam dapibus, fusce pharetra morbi consequat vel aenean habitasse. Tortor quisque curae; quisque elit velit donec suspendisse lobortis pulvinar. Turpis pulvinar lacinia.</p>
  <p>Est dapibus nibh varius montes nisi, conubia neque mi. Curabitur dictum, eget neque. Feugiat tempor non fames duis! Torquent per imperdiet natoque consequat hac donec? Dui himenaeos aliquam convallis eu nec laoreet dictumst purus. Tempor hac aenean magnis eu eleifend quam class mauris nascetur hac consequat diam. Viverra hac molestie iaculis risus facilisi rutrum gravida. Sit dignissim aliquet, proin metus iaculis quam netus ac. Placerat ut leo interdum sed feugiat ultricies nulla curabitur. Vestibulum sem ornare et vivamus ante felis suscipit ultrices eu cursus? Tempor himenaeos luctus egestas magnis class consequat quam ac metus commodo elit nascetur. Tortor ante fusce duis sit condimentum eget tincidunt aptent sem ultrices. In tincidunt ad posuere condimentum pellentesque sociosqu sagittis. Integer nisi litora dignissim fames. A nec.</p>
  <p>Class mi vel nisl habitasse luctus proin ante molestie metus ligula? Erat pharetra eget vestibulum platea vulputate turpis. Enim duis dignissim suspendisse praesent aliquet pulvinar leo et accumsan varius et aenean! Fermentum lobortis phasellus quisque arcu sem vulputate cubilia? Auctor scelerisque nibh rutrum elit rhoncus fusce urna. Habitant nisl pharetra morbi metus potenti porta est vitae diam lorem. Scelerisque facilisis magnis duis aptent! Felis a justo tellus porttitor integer primis maecenas non primis varius molestie rutrum? Vehicula ante, hac nisi praesent ac cum condimentum lobortis. Potenti leo semper euismod! Vulputate venenatis nisi orci a erat aptent sapien taciti vivamus mattis nullam quisque. Volutpat interdum convallis donec donec maecenas eu hac semper dignissim tincidunt. Quis.</p>
  <p>Augue luctus proin lobortis adipiscing nulla himenaeos pharetra gravida dui dignissim himenaeos lorem. Mauris neque blandit adipiscing amet eu natoque! Et vulputate, est sed libero in ipsum. Torquent ipsum nullam mus. Euismod ultricies risus varius gravida. Posuere tincidunt ullamcorper mi dapibus neque senectus non id vulputate rutrum enim. Sodales metus dolor blandit. Hendrerit aliquet non arcu elementum, erat facilisis erat. Orci nec netus nascetur! Fermentum nisi cras mollis ante sem aliquet vel. Velit tortor tortor vestibulum accumsan donec donec curae; nam rutrum! Ullamcorper nullam tortor tempus enim potenti massa imperdiet venenatis parturient parturient mi conubia. Habitasse sodales!</p>
</main>
<footer>
  Copyright (c) <a href="https://www.altair.blog/">Michal A. Valášek</a> - <a href="https://www.altairis.cz/">Altairis</a>, 2020
</footer>

/*
    $WidthStop:             maximum width for collapsed menu
    $Padding:               general padding value
    $ItemSpacing:           spacing between items of horizontal menu
    $Color:                 foreground color
    $BackColor:             background color
    $HoverColor:            foreground color for hover state
    $HoverBackColor:        background color for hover state
    $WideAlign              content alignment in wide mode
    $NarrowAlign:           content alignment in narrow mode
*/
@mixin rnav(
  $WidthStop: 40em,
  $Padding: 0.5em,
  $ItemSpacing: 2em,
  $Color: #fff,
  $BackColor: #000,
  $HoverColor: #fd0,
  $HoverBackColor: #333,
  $WideAlign: center,
  $NarrowAlign: left
) {
  input[type="checkbox"] {
    position: absolute;
    left: -9999em;

    ~ label {
      display: none;
    }
  }

  ul {
    list-style: none;
    text-align: $WideAlign;
    margin: 0;
    padding: $Padding;
    background: $BackColor;

    li {
      display: inline;
    }

    a {
      display: inline-block;
      padding: $Padding $ItemSpacing / 2;
      text-decoration: none;
      color: $Color;

      &:active,
      &:focus,
      &:hover {
        color: $HoverColor;
        background: $HoverBackColor;
      }
    }
  }

  @media (max-width: $WidthStop) {
    ul {
      display: none;
      overflow: hidden;

      li {
        text-align: $NarrowAlign;
      }

      a {
        display: block;
      }
    }

    input[type="checkbox"] {
      ~ label {
        padding: $Padding;
        text-align: $NarrowAlign;
        background: $BackColor;
        color: $Color;

        span {
          padding: $Padding;
          display: block;

          &:active,
          &:focus,
          &:hover {
            background: $HoverBackColor;
            color: $HoverColor;
          }
        }

        &.open {
          display: block;
        }

        &.close {
          display: none;
        }
      }

      &:checked {
        ~ label {
          margin: 0;

          &.open {
            display: none;
          }

          &.close {
            display: block;
          }
        }

        ~ ul {
          display: block;
        }
      }
    }
  }
}

$FgColor: #333;
$BgColor: #eee;
$AccentColor1: #f60;
$AccentColor2: #fff;
$Padding: 1ex;

html {
  background-color: $BgColor;
  color: $FgColor;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  max-width: 950px;
  margin: 0 auto;
}

header {
  padding: 0;
  background-color: $AccentColor2;
  margin-top: $Padding;

  h1 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 200%;
  }

  i.fa {
    background-color: $AccentColor1;
    color: $AccentColor2;
    padding: $Padding / 4;
    margin-right: $Padding / 4;
    font-size: 300%;
    vertical-align: middle;
  }
}

nav {
  @include rnav(
    $WidthStop: 675px,
    $Color: $AccentColor2,
    $BackColor: $FgColor,
    $HoverColor: $AccentColor1,
    $HoverBackColor: $FgColor,
    $Padding: $Padding
  );

  a i.fa {
    color: $AccentColor1;
    font-size: 160%;
    vertical-align: middle;
  }
}

main {
  padding: $Padding;
}

footer {
  background-color: $FgColor;
  color: $BgColor;
  padding: $Padding;
  font-size: 80%;
  text-align: right;

  a {
    color: $BgColor;

    &:hover {
      color: $AccentColor1;
    }
  }
}