<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="navbar navbar-default holder" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-brand-centered"> <div class="wrap"> <div class="btn holder"> <ul class="social-media all"> <li><a href="#" class="fa fa-facebook">acebook</a></li> <li><a href="#" class="fa fa-youtube">outube</a></li> <li><a href="#" class="fa fa-pinterest">interest</a></li> <li><a href="#" class="fa fa-google">oogle</a></li> </ul> </div> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </nav>

.navbar-brand-centered { position: absolute; left: 50%; display: block; width: 160px; text-align: center; background-color: transparent; } .navbar>.container .navbar-brand-centered, .navbar>.container-fluid .navbar-brand-centered { margin-left: -80px; } ul.social-media.all { margin-bottom: -47px; } a.fa.fa-twitter { text-decoration: none; color:#8f8c8c; } a.fa.fa-facebook{ text-decoration: none; color:#8f8c8c; } a.fa.fa-youtube{ text-decoration: none; color:#8f8c8c; } a.fa.fa-pinterest{ text-decoration: none; color:#8f8c8c; } a.fa.fa-google { text-decoration: none; color:#8f8c8c; } ul.social-media.all li { list-style: none; display: table-cell; } ul.social-media.all a { width: 6px; padding: 11px 0px 11px 19px; padding-right: 77px; margin-top: 7px; font-size: 16px; color: #2b2929b3; border-right: 2px solid #3b5998; } .btn.holder a { -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); display: block; text-decoration: none; border-radius: 30px; padding: 16px 57px; } a.fa.fa-facebook:hover { letter-spacing: 5px; font-weight: bold; padding-right: 108px; background: 3b5998; color: white; background: #3b5998; border-right: 4px solid #f49e52; transition: all .3s ease-in-out; } a.fa.fa-youtube:hover { letter-spacing: 5px; font-weight: bold; padding-right: 108px; background: 3b5998; color: white; background: #3b5998; border-right: 4px solid #f49e52; transition: all .3s ease-in-out; } a.fa.fa-pinterest:hover { letter-spacing: 5px; font-weight: bold; padding-right: 108px; background: 3b5998; color: white; background: #3b5998; border-right: 4px solid #f49e52; transition: all .3s ease-in-out; } a.fa.fa-google:hover { letter-spacing: 5px; font-weight: bold; padding-right: 108px; background: 3b5998; color: white; background: #3b5998; border-right: 4px solid #f49e52; transition: all .3s ease-in-out; }