NWjQEBj

index.html

<nav>
  <div id=cont>
    <ul id="logo">
      <li><a href="/">Lorem.</a></li>
    </ul>
    <label for="menuButton">&#9776;</label>
  </div>
  <input type="checkbox" id = "menuButton">
  <ul id="navbar">
    <li><a href="/">Home</a></li>
    <li><a href="#">Hi?</a></li>
    <li><a href="#">Iste.</a></li>
    <li><a href="#">Tempore?</a></li>
    <li><a href="#">Dolorum?</a></li>
  </ul>
</nav>

nwjqebj.markdown

NWjQEBj

A Pen by Anon Ymous on CodePen.

License.

style.css

body {
  margin: 0;
  padding: 0;
  text-overflow: none;
}

nav {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#float-right {
  background: #333;
  width: 100%;
  length: 100%;
}

#logo {
  float: left;
}

#navbar, #logo {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: #333;
  display: flex;
  justify-content: flex-end;
}
#navbar li, #logo li {
}
#navbar li:first-child {
  display: none;
}
#navbar li a, #logo li a {
  text-decoration: none;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  background: #333;
}
#logo li a {
  background: hsl(220, 50%, 50%);
}
#navbar li a:hover, #logo li a:hover {
  background: darkblue;
}

nav label {
  display: none;
  padding: 10px;
  text-align: center;
  color: white;
  background: green;
  cursor: pointer;
  float: right;
  z-index: 3;
/*   height: 100%; */
}
nav label:hover {
  background: darkgreen;
}
#menuButton {
  display: none;
}


@media screen and (max-width: 768px) {
  #cont {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  #cont label {
    display: block;
    flex-grow: 1;
  }
  #logo {
    display: block;
    flex-grow: 100;
  }
  #logo li a {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0%;
  }
  #navbar li:first-child {
    display: block;
  }
  #navbar {
    display: none;
  }
  #menuButton:checked ~ #navbar {
    display: block;
  }
  #navbar {
    display: none;
  }
  #navbar li a {
    text-align-last: left;
  }
}