Skip to content

Instantly share code, notes, and snippets.

@BoDonkey

BoDonkey/index.html

Created June 4, 2017 09:37
Show Gist options
  • Save BoDonkey/7bb102c48399c9ed62c0fe486230b352 to your computer and use it in GitHub Desktop.
Save BoDonkey/7bb102c48399c9ed62c0fe486230b352 to your computer and use it in GitHub Desktop.
Download ZIP
foundation sticky nav example for assistance
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" />
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<header id="header" class="collapse">
<div class="columns small-12 hideit">
<img src="http://springhilldesign.net/wp-content/uploads/2016/03/sm_barn.jpg" class="magnify saturation hideit" />
</div>
</header>
<div data-sticky-container>
<nav class="sticky full-width nudge-up" data-sticky data-top-anchor="header:bottom" data-margin-top="0">
<div class="top-bar-title">
<span data-responsive-toggle="topbar-responsive" data-hide-for="medium"><button class="menu-icon" type="button" data-toggle></button></span>
<a class="topbar-responsive-logo" href="#"><strong>Site Title</strong></a>
</div>
<div id="topbar-responsive" class="topbar-responsive-links">
<div class="top-bar-right">
<ul class="menu vertical medium-horizontal menu-hover-lines">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Clients</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Raw
main.css
.full-width {
width: 100%;
}
.nudge-up {
margin-top: -30px;
}
.hideit {
overflow: hidden;
}
.magnify {
transform: scale(1.4);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment