Responsive header

by Corentin Ballot

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 

<div class="container">
<div class="layout">

<header role="banner" class="header">
	<button class="header_mobile_toggle" id="mobile_drawer_toggle">
		<i class="material-icons">menu</i>
	</button>
	<h1 class="header_mobile_title">NavBar</h1>
	<a href="/" class="header_logo">
		<img src="http://corentin-ballot.duckdns.org/favicon.ico">
	</a>
	<nav role="navigation" class="header_navigation" aria-hidden="true" id="navigation_bar">
		<ul class="header_navigation_items">
			<li class="header_navigation_items__item" aria-current="page"><a class="header_navigation_items__item_link" href="#Accueil">Accueil</a></li>
			<li class="header_navigation_items__item"><a class="header_navigation_items__item_link" href="#Apropos">À propos</a></li>
			<li class="header_navigation_items__item"><a class="header_navigation_items__item_link" href="#Contact">Contact</a></li>
			<li class="header_navigation_items__item_wrapper"></li>
			<!--<li class="header_navigation_items__item"><a class="header_navigation_items__item_link" href="#Register">Register</a></li>
			<li class="header_navigation_items__item"><a class="header_navigation_items__item_link" href="#Login">Login</a></li>-->
			<li class="header_navigation_items__item header_navigation_items__drawer_header">
				<a class="header_navigation_items__item_linkwithicon" href="/profil">
					<i class="material-icons">person</i>
					<div class="header_navigation_items__item_userinfos">
						<span class="header_navigation_items__item_userinfos_username">corentin.ballot</span>
						<span class="header_navigation_items__item_userinfos_email">[email protected]</span>
					</div>
				</a>
			</li>
			<li class="header_navigation_items__item">
				<a class="header_navigation_items__item_linkwithicon" href="#Login">
					<i...

CSS

body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.layout {
  width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}

main {
  position: relative;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
  z-index: 1;
  padding: 8px;
}

.header {
  background-color: #6e8787;
  overflow: hidden;
  display: flex;
  align-items: center;
	box-shadow: 0px 2px 2px 0px #656565;
	color: #f1f4f4;
	height: 64px;
	min-height: 64px;
	padding: 0 8px;
  margin-bottom: 3px;
}

.header_mobile_toggle {
	display: none;
	background: none;
	border: none;
}

.header_mobile_title {
	display: none;
}

.header_logo {
  line-height: 0;
}

.header_logo > img {
  max-height: 40px;
  width: auto;
  padding: 3px 20px;
}

.header_navigation {
    display: flex;
    align-items: center;
		width: 100%;
}

.header_navigation_items {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.header_navigation_items__item {
  font-size: 18px;
  line-height: 18px;
  color: inherit;
	font-size: inherit;
  position: relative;
}

.header_navigation_items__item[aria-current="page"]::after {
  display:block;
  content: '';
  background-color: #f1f4f4;
  width: 16px;
  height: 1px;
  position: absolute;
  bottom: 8px;
  left: calc(50% - 8px);
}

.header_navigation_items__item_wrapper {
  flex-grow: 200;
}

.header_navigation_items__item:hover {
    background-color: #2e3838;
}

.header_navigation_items__item_link {
    display: block;
    color: inherit;
    padding: 14px 16px;
    text-decoration: none;
}

.header_navigation_items__item_linkwithicon {
  display: flex;
  align-items: center;
  color: inherit;
  padding: 11px 16px;
  text-decoration: none;
}

.header_navigation_items__item_linkwithicon > .material-icons {
  margin-right: 8px;
}

.header_navigation_items__item_linkwithicon_text {
 ...

JavaScript

// Open drawer
document.getElementById('mobile_drawer_toggle').addEventListener("click", function(){
	var nav = document.getElementById('navigation_bar');
	nav.setAttribute('aria-hidden', 'false');
	var obf = document.getElementById('obfuscator');
	obf.setAttribute('aria-hidden', 'false');
  document.getElementById('main').setAttribute('style', 'overflow-y: hidden;');
}, false);

// Close drawer
document.getElementById('obfuscator').addEventListener("click", function(){
	var nav = document.getElementById('navigation_bar');
	nav.setAttribute('aria-hidden', 'true');
	var obf = document.getElementById('obfuscator');
	obf.setAttribute('aria-hidden', 'true');
  document.getElementById('main').removeAttribute('style');
}, false);