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
<header id="masthead" class="masthead compact-for-data" xdata-sticky data-sticky-on="large" xdata-top-anchor="content:top" xdata-btm-anchor="content:bottom">
<div class="masthead-inner row" data-tip="you may want to add .collapse here to make remove margins on the columns">
<div class="columns medium-7 large-3" id="local-title">
<h1><a href="#" title="Back to [service-name] homepage">
<img style="height: 40px;" class="padding-bottom-small" src="https://www.ebi.ac.uk/QuickGO/images/quickgo-logo3.622656dc.png" />
Service
</a></h1>
</div>
<div class="column medium-5 large-3 large-push-6">
<form id="ebi_search" action="https://www.ebi.ac.uk/ebisearch/search.ebi">
<fieldset>
<div class="input-group margin-bottom-none margin-top-large">
<input id="query" class="input-group-field" title="EB-eye Search" tabindex="1" type="text" name="query" value="" size="35" maxlength="2048" placeholder="Search service" />
<div class="input-group-button">
<input id="search_submit" class="button icon icon-functional" tabindex="2" type="submit" name="submit1" value="1" />
<input id="allebi" type="hidden" name="db" value="allebi" checked="checked" />
<input type="hidden" name="requestFrom" value="ebi_index" />
</div>
</div>
</fieldset>
</form>
</div>
<nav class="column large-6 large-pull-3">
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li class="active"><a href="{{root}}">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>
<ul class="dropdown menu float-right" data-description="tasks">
<li><a href="#"><span class="icon icon-functional" data-icon="l"></span> Login</a></li>
</ul>
</nav>
</div>
</header>
.masthead.compact-for-data {
.masthead-inner {
padding-top: .5rem;
div#local-title {
margin-bottom: 0;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0;
margin-top: -.5rem;
}
form {
margin-top: -1rem;
}
nav {
margin-top: .75rem;
clear: none;
}
}
&.compact-disabled .masthead-inner > nav.column {
width: 100%;
left: 0;
}
}
.masthead.compact-for-data .masthead-inner {
padding-top: .5rem;
}
.masthead.compact-for-data .masthead-inner div#local-title {
margin-bottom: 0;
}
.masthead.compact-for-data .masthead-inner h1 {
font-size: 2.5rem;
margin-bottom: 0;
margin-top: -.5rem;
}
.masthead.compact-for-data .masthead-inner form {
margin-top: -1rem;
}
.masthead.compact-for-data .masthead-inner nav {
margin-top: .75rem;
clear: none;
}
.masthead.compact-for-data.compact-disabled .masthead-inner > nav.column {
width: 100%;
left: 0;
}