Masthead compact
For pages where the interface needs to get out of the way so users can focus on the data.
v1.2 only
In v1.2 we’ve already shaved 10px off the black bar, but the need remains for a yet-thinner div#masthead on inside pages that are search-result or data focused. In all it’s 56% thinner than the current look.
Method: Do
- Add the class
.compact-for-datato yourdiv.masthead - Disable the example search queries on your search box. Your user should have already searched or have arrived at their destination.
- Use this on pages where the primary content is a large table or data visualisations where you want your service branding to “get out of the way”
Consider
- Adding responsive classes to the menu to collapse into a thinner line for large screens
<div id="masthead" class="masthead compact-for-data"> <div id="masthead-black-bar" class="clearfix masthead-black-bar"></div> <div class="masthead-inner row"> <div class="columns medium-7 large-3" id="local-title"><h1></h1></div> <div class="columns medium-5 large-3 large-push-6"><form id="ebi_search" action="/ebisearch/search.ebi"></form></div> <div class="columns large-6 large-pull-3"><nav></nav></div> </div> </div>
- Or, without a search box:
<div id="masthead" class="masthead compact-for-data"> <div id="masthead-black-bar" class="clearfix masthead-black-bar"></div> <div class="masthead-inner row expanded"> <div class="float-left inline-block padding-left-large" id="local-title"><h1></h1></div> <nav class="float-left columns medium-7 large-8"></nav> </div> </div>
Do not
- Use the sticky property for the global header
- Use this on your homepage or generic content pages
For a sample implementation see the search results and ultra wide boilerplate pages.
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.