Fixed hamburger menu

by Dmitriy Uvarov

HTML

<div class="menu">
  <ul class="flex topnav" id="myTopnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Servicing</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>      
</div>
<div id="hamburger">
  <a href="#">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Bounding_Boxes">
	<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Outline_1_">
	<path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"/>
</g>
</svg>
  </a>
</div>

CSS

#hamburger {
  position: fixed;
  right: 0;
  top: 0;
  display: block;
}

.topnav {
  float:right;
  display: flex;
  flex-wrap: wrap;
  width: 15%;
  text-align: left;
  padding: 0 15px;
  background: black;
  line-height: 40px;
  position: fixed;
  right: 0;
  top: 15px;
 	display: none;
}

.topnav li {
  list-style: none;
}

.topnav a {
  color: #fff;
}

.topnav.open {
  display: block;
}

JavaScript

var myNav = document.getElementById('myTopnav');
var hamburger = document.getElementById('hamburger');

hamburger.addEventListener('click', function(event) {
	event.preventDefault();
  
  myNav.classList.toggle('open');
});