<div id="page">
  <div class='header'>
    a header
    <a href="#primary-menu">
      <span class="icon-menu"></span>
    </a>

  </div>
  <div class="content">
  </div>

  <nav id="primary-menu">
    <div>
      <div class="form-group login-area">
        <label>
          <a> Log in</a>
        </label>
      </div>
      <hr />
      <div class="lan-panel">
        <div class="btn-group">
        <button type="button" class="btn btn-default">EN</button>
        <button type="button" class="btn btn-default">FR</button>
        <button type="button" class="btn btn-default">NL</button>
        </div>
      </div>
      <hr/>
      <ul>
        <li>
          <a>COMPUTING</a>
          <ul>
            <li> <a> DeskTop and workstations </a>
              <li>
          </ul>
          </li>
          <li>
            <a>PHERIPHERALS</a>
            <ul>
              <li> <a> DeskTop and workstations </a>
                <li>
            </ul>
            </li>
            <li><a>PRINTING</a>
              <ul>
                <li> <a> DeskTop and workstations </a>
                  <li>
              </ul>
              </li>
              <li>
                <a>SOFTWARE</a>
                <ul>
                  <li> <a> DeskTop and workstations </a>
                    <li>
                </ul>
                </li>
        <li>
                <a>STORAGE</a>
                <ul>
                  <li> <a> DeskTop and workstations </a>
                    <li>
                </ul>
                </li>
        <li>
                <a>NETWORKING</a>
                <ul>
                  <li> <a> DeskTop and workstations </a>
                    <li>
                </ul>
                </li>
        <li>
                <a>POWER</a>
                <ul>
                  <li> <a> DeskTop and workstations </a>
                    <li>
                </ul>
                </li>
      </ul>
      <hr/>
      <ul>
        <li><a> Contacts</a> </li>
      </ul>
    </div>
  </nav>

</div>

@import "compass/css3";

.header {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 50px;
  background-color:#f2f2f2;
  
}

.mm-menu {
  margin-top: 50px;
}

nav:not(.mm-menu) {
	display: none;
}

body {
  margin: 0;
  padding: 0;
}

@include font-face("Icons", font-files("https://s3-ap-southeast-2.amazonaws.com/cdn.isotropic.me/fonts/icomoon/1/icomoon.ttf"));


.icon-menu:before {
  position: absolute;
  right: 20px;
  top: 15px;
  font-family: "Icons";
  //content: '\e9bd';
  content: '\f0c9';
  
}
.login-button{
  margin-left:40%;
}
.login-area{
  background-color:#FF9902;
}
.login-area > label{
  margin-left:40%;
}
.btn-group{
   margin-left:30%;
}

$(document).ready(function(){
  
  $("#primary-menu").mmenu({
    "offCanvas": {
      "zposition": "front"
    }
  });
});