Как создать навигацию как на макете?
вот так (тут на flex)
или вот готовый
Есть же готовые решения, вот на пример:
https://codepen.io/nz4/pen/xVyvmz
https://codepen.io/nz4/pen/bpQGGL
https://codepen.io/nz4/pen/mPzNQZ

А дальше уже ручками можно допилить.

ГОТОВЫЙ КОД<body>
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">WORK</a></li>
    <li><a href="#">BLOG</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</body>

body {
  background-color: #86519d;
}

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  color:#fff; /*меняем цвет ссылок*/
  padding:10px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  border-radius:4px; /*добавляем скругление*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
  background:#653a79;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
}