<div class="links">
	<p class="home" >Logo</p>
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
		<li><a href="#">Link 5</a></li>
		<li class="last"><a href="#"  >Link Thing</a></li>
		<li><div class="triangle"></div></li>
	</ul>	
</div>	
*
	box-sizing: border-box

body
	font-family: 'Oxygen', sans-serif

.links
	width: 100%
	position: fixed
	top: 0
	left: 0
	background: #197BBD
	display: flex
	padding: 0 20px
	height: 70px
	align-items: center
	justify-content: space-between
	color: white
	ul
		list-style: none
		padding: 0
		position: relative
		li
			display: inline-block
			padding: 0 15px
			text-align: center
			&.last,
			&:last-child
				padding-right: 0
			.triangle
				width: 25px
				height: 25px
				background: #197BBD
				transform: rotate(45deg)
				position: absolute
				left: 0
				top: 30px
				z-index: -1
			a
				color: white
				text-decoration: none
View Compiled
$(document).ready(function(){
	var ulOffsetLeft = $(".links ul").offset().left;
	var OffsetFromLeft = $(".links ul li").first().find("a").offset().left - ulOffsetLeft;
	var firstWidthCenter = $(".links ul li").first().find("a").width() / 2  - 12.5 + OffsetFromLeft;
	$(".triangle").animate({"left": firstWidthCenter }, 350);
	
	$(document).on('click', '.home', function(){
		var ulOffsetLeft = $(".links ul").offset().left;
		var OffsetFromLeft = $(".links ul li").first().find("a").offset().left - ulOffsetLeft;
		var firstWidthCenter = $(".links ul li").first().find("a").width() / 2  - 12.5 + OffsetFromLeft;
		$(".triangle").animate({"left": firstWidthCenter }, 350);
	});
	
	$(document).on('click', ".links ul li a", function(e){
		var ulOffsetLeft = $(".links ul").offset().left;
		var OffsetFromLeft = $(e.target).offset().left - ulOffsetLeft;
		var triangleTarget = $(e.target).width() / 2 - 12.5  + OffsetFromLeft;
		$(".triangle").animate({"left": triangleTarget }, 350)
		
	});
});
Rerun