<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 ----------> <div class="header_wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-4"> <div class="logo"> <h2>Logo Icon</h2> </div> </div> <div class="col-lg-8 align-self-center"> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </div>

.header_wrapper { background: gray; padding: 10px 0px; } .logo h2 { font-size: 25px; color: #ffffff; } .menu { text-align: right; } .menu ul{ margin: 0; padding: 0; } .menu ul li{ display: inline-flex; margin-right: 20px; position: relative; } .menu ul li:before{ content: ''; position: absolute; width: 0; height: 5px; border-top: 2px solid #ffffff; transition: all 0.5s; } .menu ul li:hover:before{ width: 100%; } .menu ul li:after{ content: ''; position: absolute; width: 0; height: 5px; bottom: 0; border-bottom: 2px solid #ffffff; transition: all 0.5s; } .menu ul li:hover:after{ width: 100%; } .menu ul li a{ text-decoration: none; color: #ffffff; font-weight: 600; padding: 7px 0px; }