Create compact masthead pattern

[khawkins98]

The need for a thinner masthead bar is a long standing issue that has been brought to the fore thanks to efforts by @markbingley. So we're applying a renewed effort into creating a pattern (and usage guidance).

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.

Here's how it could look:

That's 56% thinner than the current look.

Method: Do

• Add the class .compact-for-data to your div.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

Pudding:

• Guidance: https://ebiwd.github.io/EBI-Pattern-library/sample-site-v1.2/boilerplate/search-results.html
• Sample implementation: https://ebiwd.github.io/EBI-Pattern-library/meta-patterns/masthead-compact/

[khawkins98]

Would be nice if this was totally class driven...

[khawkins98]

This now exists: https://www.ebi.ac.uk/style-lab/websites/patterns/masthead-compact.html