<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-12 social"> <div class="pull-right"> <a href="#" class="text-info"><i class="fa fa-twitter"></i></a> <a href="#" class="text-success"><i class="fa fa-envelope"></i></a> <a href="#" class="text-warning"><i class="fa fa-phone"></i></a> <a href="#" class="text-danger"><i class="fa fa-google-plus"></i></a> </div> </div> <div class="col-md-12 user-details"> <div class="user-info-block"> <ul class="navigation"> <li> <a href="#information"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/Amazon-Kindle-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#information"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/FirefoxBeta-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#email"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/Microphone-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#events"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/MusicBrainz-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#events"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/WinRAR-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#events"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/RetinaDisplayMonitor-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#events"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/PhotoscapeX-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#events"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/YNAB-icon.png" class="img img-responsive"></img> </a> </li> <li> <a href="#events"> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/96/WJoy-icon.png" class="img img-responsive"></img> </a> </li> </ul> </div> </div> </div> </div>

@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"; body {background: #EAEAEA;} .user-details .user-info-block {width: 100%; position: absolute; top: 55px; background: rgb(255, 255, 255); z-index: 0; padding-top: 35px;} .user-info-block .navigation {float: left; width: 100%; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #428BCA; border-top: 1px solid #428BCA;} .navigation li {float: left; margin: 0; padding: 0;} .navigation li a {padding: 8px 15px; float: left;} .navigation li a img {background: #fff; border: 4px solid #fff; border-radius:50%;} .navigation li:hover img {border: 4px solid #d0d0d0;} .navigation li.active img {border: 4px solid #23705d;} .social{width: 100%; position: absolute; top: 55px; z-index: 1; padding-top: 5px;} .social div a i {padding: 4px 4px; border: 1px solid #fff; border-radius:50%;} .social a:hover i {border: 1px solid #000; background: #000; color:#fff}