Skip to content

Instantly share code, notes, and snippets.

@Kimserey

Kimserey/index.html

Created March 11, 2017 11:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kimserey/844f7634fc0f36b5e464c4d3321a4c87 to your computer and use it in GitHub Desktop.
Save Kimserey/844f7634fc0f36b5e464c4d3321a4c87 to your computer and use it in GitHub Desktop.
Download ZIP
Nav sticky
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/filament-sticky/fixedsticky.css" />
<style>
.fixedtop {
top: 0;
z-index: 10;
}
.content {
background-color: rgba(0, 0, 255, 0.21);
height: 2000px;
margin: 1em;
}
</style>
</head>
<body>
<div class="text-center display-1 banner bg-faded">
Hero banner<br/>Some image or something
</div>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixedsticky fixedtop">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="content"></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/tether/dist/js/tether.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/filament-sticky/fixedsticky.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment