<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 ----------> <nav class="menum navbar navbar-light navbar-expand-md justify-content-center fixed-top"> <div class="container"> <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2"> <ul class="topBotomBordersOut navbar-nav mx-auto text-center"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"><a class="nav-link" href="#">About</a></li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav>

@import url(http://fonts.googleapis.com/css?family=Raleway); body{ background-color:#ff666f; } a{ color:#fff !important; } .nav-item { font-family: Century Gothic; margin: 0 auto; padding: 5em 3em; text-align: center; } .nav-item a { color: #FFF; text-decoration: none; font: 20px Century Gothic; margin: 0px 10px; padding: 10px 10px; position: relative; z-index: 0; } /* Top & Bottom Borders Out */ .topBotomBordersOut a:before, .topBotomBordersOut a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content:""; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .topBotomBordersOut a:before { top: 0px; transform: translateY(10px); } .topBotomBordersOut a:after { bottom: 0px; transform: translateY(-10px); } .topBotomBordersOut a:hover:before, .topBotomBordersOut a:hover:after { opacity: 1; transform: translateY(0px); }