Implementation code
Get a zip with all the sample HTML and any spaecial CSS or JS needed:
Download a ZIP file
More on how to use this
<div data-sticky-container>
<header id="masthead" class="masthead" data-sticky data-sticky-on="large" data-top-anchor="content:top" data-btm-anchor="content:bottom">
<div class="masthead-inner row">
<div class="columns medium-12" id="local-title">
<h1><a href="../../" title="Back to [service-name] homepage">EBI Framework</a></h1>
</div>
<nav >
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="../../">Overview</a></li>
<li><a data-open="modal-download">Download</a></li>
<li><a href="#">Support <i class="icon icon-generic" data-icon="x"></i></a></li>
</ul>
</nav>
</div>
</header>
</div>
.masthead {
background-color: #eee;
.masthead-inner {
nav ul.menu li { border-right-color: #EEE; }
h1, h1 a, h4, p, a,
.menu > li > a { color: #666; }
.menu > li > a:hover { color: rgb(0,124,130); }
.menu > li.active-trail > a { background: rgb(0,124,130);; color: #fff }
}
}
.masthead {
background-color: #eee;
}
.masthead .masthead-inner nav ul.menu li {
border-right-color: #EEE;
}
.masthead .masthead-inner h1, .masthead .masthead-inner h1 a, .masthead .masthead-inner h4, .masthead .masthead-inner p, .masthead .masthead-inner a,
.masthead .masthead-inner .menu > li > a {
color: #666;
}
.masthead .masthead-inner .menu > li > a:hover {
color: #007c82;
}
.masthead .masthead-inner .menu > li.active-trail > a {
background: #007c82;
color: #fff;
}