eonist/hamburger-menu.html

## hamburger-menu.html
<!DOCTYPE html>
<html>
<head>
	<title>Hamburger menu prototype</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="styles.css">
	<meta name="viewport" content="width=device-width">
</head>
<body>
	<div class="header">
		<input id="toggle" type="checkbox">
		<div class="container">
			<div class="first">
				<div class="placeholder"><!-- empty -->
				</div>
				<div class="logo"><!-- button -->
					logo
				</div>
				<div class="button"><!-- button -->
					<label for="toggle">&#9776;</label> <!-- hamburger character-->
				</div>
			</div>
			<div class="second"><!-- logo -->
				<a href="#">Home</a>
				<a href="#">Business</a>
				<a href="#">Contact</a>
				<a href="#">About</a>
			</div>
		</div>
	</header>
</body>
</html>

## styles.css
body, html {
  font-family: "helvetica neue", sans-serif;
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: lightblue;
}
.header {
   background-color: orange;
   width: 100%;
   height: 100px;
   /*flex-direction: row-reverse;*/
	/* float: left; */
	display: flex;
	justify-content: center; /*center horizontal*/
	align-items: center;
}
.header .container {
   display: flex;
   justify-content: center; /*center horizontal*/
   /*flex-flow: column;*/
   /*flex-direction: column;*/
   background-color: cyan;
   height: 100%;
   width: 700px;
}
.header .container .first {
   background-color: red;
   width: 20%;
   height: 100px;
}
.header .container .first .placeholder {
   background-color: brown;
   display: none;
   height: 100px;
   float: left;
}
.header .container .first .logo {
   width: 100%;
   height: 100px;
   display: block;
   float: left;
   background-color: green;
   text-align: center;
   display: flex;
	justify-content: center; /*center horizontal*/
	align-items: center; /*center vertical*/
}
.header .container .first .button {
   display: none;
   background-color: purple;
   height: 100px;
   float: left;
}
.header .container .second {
   background-color: blue;
   width: 80%;
   height: 100px;
   text-align: center;
   display: flex;
   justify-content: center; /*center horizontal*/
   align-items: center; /*center vertically*/
}
.header .container .second a {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px;
   margin: 0px; /* or else margin is added */
   padding: 0px;
   padding-left: 20px;
	padding-right: 20px;
   background-color: pink;
   text-decoration: none;
   color: black;
}
.header .container .second a.active {
	text-decoration: underline;
}
.header input {
  display: none; /* checkbox is always hidden, it's just a proxy */
}
.header .container .first .button label { /*hamburger menu*/
  font-size: 40px; /*size of hamburger menu*/
  margin-top: -10px; /*This is a bug in the burger char that we cant get around*/
    /*or else menu bellow is positioned wrong*/
  cursor: pointer; /*Adds cursor click indicator on menu*/
  display: none; /*Hide while in desktop-mode*/
  background-color: magenta;
  text-align: center;
}
/**
 * Mobile mode
 */
@media (max-width: 700px) { /* activate responsive mode */
   .header .container {
      display: block;
      /*flex-direction: column;*/
   }
   .header .container .first {
      width: 100%;
   }
   .header .container .first .placeholder {
      display: block;
      width: 20%;
      visibility: hidden;
   }
   .header .container .first .logo {
      width: 60%;
   }
   .header .container .first .button {
      display: flex;
      width: 20%;
      text-align: center;
      display: flex;
      justify-content: center; /*center horizontal*/
      align-items: center; /*center vertically*/
   }
   .header .container .second { /*menu*/
      width: 100%;
      margin: auto;
		flex-direction: column;
      display: none;
   }
   .header .container .first .button label { /*hamburger menu*/
     display: block; /* show and move element to new line, gets whole width, like <p> */

   }
   .header input:checked + .container .second { /*show menu mode*/
      /*show element, new line, use entire width*/
     background-color: yellow;
     display: flex;
     /*clear: both;*/
   }
}
	body, html {
	font-family: "helvetica neue", sans-serif;
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: lightblue;
	}
	.header {
	background-color: orange;
	width: 100%;
	height: 100px;
	/flex-direction: row-reverse;/
	/* float: left; */
	display: flex;
	justify-content: center; /center horizontal/
	align-items: center;
	}
	.header .container {
	display: flex;
	justify-content: center; /center horizontal/
	/flex-flow: column;/
	/flex-direction: column;/
	background-color: cyan;
	height: 100%;
	width: 700px;
	}
	.header .container .first {
	background-color: red;
	width: 20%;
	height: 100px;
	}
	.header .container .first .placeholder {
	background-color: brown;
	display: none;
	height: 100px;
	float: left;
	}
	.header .container .first .logo {
	width: 100%;
	height: 100px;
	display: block;
	float: left;
	background-color: green;
	text-align: center;
	display: flex;
	justify-content: center; /center horizontal/
	align-items: center; /center vertical/
	}
	.header .container .first .button {
	display: none;
	background-color: purple;
	height: 100px;
	float: left;
	}
	.header .container .second {
	background-color: blue;
	width: 80%;
	height: 100px;
	text-align: center;
	display: flex;
	justify-content: center; /center horizontal/
	align-items: center; /center vertically/
	}
	.header .container .second a {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	margin: 0px; /* or else margin is added */
	padding: 0px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: pink;
	text-decoration: none;
	color: black;
	}
	.header .container .second a.active {
	text-decoration: underline;
	}
	.header input {
	display: none; /* checkbox is always hidden, it's just a proxy */
	}
	.header .container .first .button label { /hamburger menu/
	font-size: 40px; /size of hamburger menu/
	margin-top: -10px; /This is a bug in the burger char that we cant get around/
	/or else menu bellow is positioned wrong/
	cursor: pointer; /Adds cursor click indicator on menu/
	display: none; /Hide while in desktop-mode/
	background-color: magenta;
	text-align: center;
	}
	/**
	* Mobile mode
	*/
	@media (max-width: 700px) { /* activate responsive mode */
	.header .container {
	display: block;
	/flex-direction: column;/
	}
	.header .container .first {
	width: 100%;
	}
	.header .container .first .placeholder {
	display: block;
	width: 20%;
	visibility: hidden;
	}
	.header .container .first .logo {
	width: 60%;
	}
	.header .container .first .button {
	display: flex;
	width: 20%;
	text-align: center;
	display: flex;
	justify-content: center; /center horizontal/
	align-items: center; /center vertically/
	}
	.header .container .second { /menu/
	width: 100%;
	margin: auto;
	flex-direction: column;
	display: none;
	}
	.header .container .first .button label { /hamburger menu/
	display: block; /* show and move element to new line, gets whole width, like <p> */

	}
	.header input:checked + .container .second { /show menu mode/
	/show element, new line, use entire width/
	background-color: yellow;
	display: flex;
	/clear: both;/
	}
	}