"facebook_navbar"
Bootstrap 4.1.1 Snippet by snippetpi

Post to Facebook Tweet this

<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 ----------> <html> <head> </head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;height:2000px;} .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 20px; } .icon-bar a:hover { background-color: #000; } .facebook { background: #3B5998; color: white; } .twitter { background: #55ACEE; color: white; } .google { background: #dd4b39; color: white; } .linkedin { background: #007bb5; color: white; } .youtube { background: #bb0000; color: white; } .content { margin-left: 75px; font-size: 30px; } </style> <body> <div class="header"> <a href="#"><div class="logo"></div></a> <div class="search"> <input type="text" id="inputText" placeholder="Search Facebook"> <div class="search-icon"> <img src="http://myradiospace.com/Album-Art/user_images/81729.jpg" ></img> </div> </div> <div class="right-side"> <div class="leftofright"> <a href="#"><img class="profile-pic" src="http://myradiospace.com/Album-Art/user_images/81729.jpg" width="32px" height="32px"></a> <p>Sam Clyde Band </p> <p>| </p> <p> Home</p> </div> <div class="rightofright"> <div class="right-icon fr"></div> <div class="right-icon messages"></div> <div class="right-icon notification"></div> <p>|</p> <div class=" right-icon privacy"></div> <div class=" right-icon down"></div> </div> </div> </div> <h1 class="small-screen">It doesn't work here. You should have a wider screen. Maybe your PC :)</h1><br><p class="small-screen">Cheers,</p><br><p class="small-screen">Goran Sherko</p> <!-- <div class="icon-bar"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google"><i class="fa fa-google"></i></a> <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> </div> --> </body> </html>
body { margin: 0px; background-color:#e9ebee; font-family: arial; } .header { background-color: #3b5998; padding: 7px 0px 3px 13%; } .header *{ display:inline-block; } p { margin: 0px; } .search { background-color: white; width: 450px; height: 24px; position: relative; top: -4px; border-raduis: 5px; } .logo { background-image: url('https://www.facebook.com/rsrc.php/v2/ys/r/aVIyzaVqPTE.png'); background-repeat: no-repeat; background-size: auto; background-position: 0 -223px; height: 24px; outline: none; overflow: hidden; text-indent: -999px; white-space: nowrap; width: 24px; position: relative; top: 3px; } #inputText { width: 300px; border-raduis: 5px; height: 22px; position: relative; top: 0px; padding-left: 5px; font-size: 14px; border: 0px; } .search-icon { background-color: #f6f7f9; height: 100%; width: 50px; text-align: center; float: right; } .search-icon img { height: 15px; width:15px; margin: 10% 0; } .right-side { position: relative; left: 15%; } .leftofright { position: relative; top: -2px; } .leftofright p { color: white; font-size: 12px; position: relative; top: -3px; font-weight: 700; } .leftofright p:nth-child(3){ color: black; opacity: 0.3; } .leftofright img { position: relative; top: 5px; } .right-icon, .fr { height: 25px; width: 25px; background-image: url(https://web.facebook.com/rsrc.php/v2/yL/r/cnjWBJCYDcu.png); background-position: 0 -248px; opacity: 0.7; } .messages { background-position: 0 -398px; } .notification { background-position:0 -348px; } .rightofright { position: relative; top: 3px; left: 10%; } .privacy { background-position:0px -613px; width: 17px; } .rightofright p { position: relative; top: -8px; opacity: 0.3; margin: 0 8px; } .down { background-position: 0px -600px; width: 15px; height: 13px; position: relative; top: -8px; } .small-screen { opacity: 0; } @media screen and (max-width: 1060px) { .header { opacity: 0; } body { background-color: #34495e; } .small-screen { opacity: 1; color: #bdc3c7; text-align: center; } }

Related: See More

Paper Kit 2 Angular

Questions / Comments: