<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="PrimaryNav with-indicator"> <li class="Nav-item"><a href="#">Home</a></li> <li class="Nav-item"><a href="#">About</a></li> <li class="Nav-item is-active"><a href="#">Writing</a></li> <li class="Nav-item"><a href="#">Clients</a></li> <li class="Nav-item"><a href="https://twitter.com/jnowland">Contact</a></li> </ul>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:800); .PrimaryNav { list-style: none; margin: 50px auto; max-width: 720px; padding: 0; width: 100%; } .Nav-item { background: #fff; display: block; float: left; margin: 0; padding: 0; width: 20%; text-align: center; } .Nav-item:first-child { border-radius: 3px 0 0 3px; } .Nav-item:last-child { border-radius: 0 3px 3px 0; } .Nav-item.is-active a { color: #e82d00; } .Nav-item a { color: #121212; display: block; padding-top: 20px; padding-bottom: 20px; text-decoration: none; } .Nav-item a:hover { color: #e82d00; } .with-indicator { position: relative; z-index: 0; } .with-indicator .Nav-item:last-child:before, .with-indicator .Nav-item:last-child:after { content: ''; display: block; position: absolute; pointer-events: none; -webkit-transition: left 1.3s ease; transition: left 1.3s ease; } .with-indicator .Nav-item:last-child:before { border: 6px solid transparent; border-top-color: #e82d00; width: 0; height: 0; top: 0; left: 10%; margin-left: -3px; } .with-indicator .Nav-item:last-child:after { background: #e82d00; top: -6px; bottom: -6px; left: 0; width: 20%; z-index: -1; } .with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:after { left: 0%; } .with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:before { left: 10%; } .with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:after { left: 20%; } .with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:before { left: 30%; } .with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:after { left: 40%; } .with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:before { left: 50%; } .with-indicator .Nav-item:nth-child(4).is-active ~ .Nav-item:last-child:after { left: 60%; } .with-indicator .Nav-item:nth-child(4).is-active ~ .Nav-item:last-child:before { left: 70%; } .with-indicator .Nav-item:nth-child(1):hover ~ .Nav-item:last-child:after { left: 0% !important; } .with-indicator .Nav-item:nth-child(1):hover ~ .Nav-item:last-child:before { left: 10% !important; } .with-indicator .Nav-item:nth-child(2):hover ~ .Nav-item:last-child:after { left: 20% !important; } .with-indicator .Nav-item:nth-child(2):hover ~ .Nav-item:last-child:before { left: 30% !important; } .with-indicator .Nav-item:nth-child(3):hover ~ .Nav-item:last-child:after { left: 40% !important; } .with-indicator .Nav-item:nth-child(3):hover ~ .Nav-item:last-child:before { left: 50% !important; } .with-indicator .Nav-item:nth-child(4):hover ~ .Nav-item:last-child:after { left: 60% !important; } .with-indicator .Nav-item:nth-child(4):hover ~ .Nav-item:last-child:before { left: 70% !important; } .with-indicator .Nav-item:last-child:hover:before, .with-indicator .Nav-item:last-child.is-active:before { left: 90% !important; } .with-indicator .Nav-item:last-child:hover:after, .with-indicator .Nav-item:last-child.is-active:after { left: 80% !important; } *, *:before, *:after { box-sizing: border-box; } .PrimaryNav:before, .PrimaryNav:after { content: " "; display: table; } .PrimaryNav:after { clear: both; } html { background-color: #121212; font-family: 'Open Sans', sans-serif; font-weight: 800; } .toggle { color: #fff; font-family: sans-serif; text-align: center; }