<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="PrimaryNav with-indicator"> <li class="Nav-item"><a href="#">PrOduCt</a></li> <li class="Nav-item"><a href="#">About</a></li> <li class="Nav-item is-active"><a href="#"><i class="fa fa-home"></i>HOme</a></li> <li class="Nav-item"><a href="#">Clients</a></li> <li class="Nav-item"><a href="#">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: #6a0dad; } .Nav-item a { color: #121212; font-weight:bolder; display: block; padding-top: 20px; padding-bottom: 20px; text-decoration: none; } .Nav-item a:hover { color: #6a0dad; } .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; transition: left 1.3s ease; } .with-indicator .Nav-item:last-child:before { border: 10px solid transparent; border-top-color: #6a5dad; width: 0; height: 0; top: 0; left: 10%; margin-left: -5px; } .with-indicator .Nav-item:last-child:after { background: #6a0dad; 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; font-size: 15px; } .toggle { color: #fff; font-family: sans-serif; text-align: center; } *{ box-sizing: border-box; } *:before{ }