Skip to content

Instantly share code, notes, and snippets.

@kraigh
Created November 2, 2016 18:47
Show Gist options
  • Save kraigh/d497bc2084a38a98aeb3c026b14f3194 to your computer and use it in GitHub Desktop.
Save kraigh/d497bc2084a38a98aeb3c026b14f3194 to your computer and use it in GitHub Desktop.
facebook header
<!DOCTYPE html>
<html>
<head>
<title>My Bootstrap Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/FB-f-Logo__white_29.png">
</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search Facebook">
</div>
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
</nav>
</body>
</html>
.navbar {
background-color: #3b5998;
}
.navbar .navbar-brand {
position: relative;
top: -3px;
}
.navbar .navbar-brand img {
height: 25px;
}
.navbar-form {
margin-top: 12px;
margin-bottom: 12px;
position: relative;
left: -25px;
}
.navbar-form input {
height: 25px;
width: 300px !important;
}
.navbar-form button {
height: 25px;
position: relative;
left: -10px;
background-color: rgb(244 245 248);
width: 40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment