JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
		<ul>
			<li class='logo hide'><a href='index.html#index'></a></li>
			<li class='first'><a href="index.html#services">Services</a></li>
			<li ><a href="index.html#projects">Portfolio</a></li>
			<li ><a href="index.html#clients">Clients</a></li>
			<li ><a href="index.html#about">About us</a></li>
			<li ><a href="index.html#progress">Achievements</a></li>
			<li ><a href="index.html#contacts">Contact information</a></li>
		</ul>			
<div class="project-load-bar"></div>
		</header>

CSS

#header {position: fixed; left: 50%; top: 0; margin-left:-430px; width:960px; background:#000; background:rgba(0,0,0,0.8); height:60px; z-index:999; border-radius:0px 0px 5px 5px;}
#header ul {padding: 23px 0 0 20px; margin-right:-20px;}
#header li {display:block; float:left; padding-right:41px;}
#header li a {color:#fff; font:bold 13px/12px 'Museo', Arial, sans-serif; padding:2px 10px 1px; display:block; border-left:1px solid #fff; border-color:rgba(255,255,255,0.5); text-transform:uppercase; -webkit-transition:color 0.4s ease-out; -moz-transition:color 0.4s ease-out; -o-transition:color 0.4s ease-out; transition:color 0.4s ease-out;}
#header li.first a {border-color:transparent; padding-left:0;}
#header li:nth-child(2) a {border-color:transparent; padding-left:0;}

#header li:last-child {padding-right:0px !important;}
#header li a:hover:not(.active) {color:#fff500;}
#header li a.active {color:#babab7;}

#header li.logo {width:0; padding-right:0; margin-top:-13px; overflow:hidden;}
#header li.logo a {background:url("../img/icons.png") -137px -318px no-repeat; width:38px; height:38px; padding:0; border-left:none; }
#header li.logo a:hover {background-position: -175px -318px;}