Compact masthead

By Ken Hawkins

layout masthead navigation Requires EBI Visual Framework 1.2.0

If you're focusing on data, this is for you.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


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

HTML
<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">
    <!-- local-title -->
    <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>
    <!-- /local-title -->
    <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>
        <!-- <p id="example" class="small">
          Examples: <a href="/ebisearch/search.ebi?db=allebi&amp;requestFrom=ebi_index&amp;query=blast">blast</a>, <a href="/ebisearch/search.ebi?db=allebi&amp;query=keratin&amp;requestFrom=ebi_index">keratin</a>, <a href="/ebisearch/search.ebi?db=allebi&amp;query=bfl1&amp;requestFrom=ebi_index">bfl1</a>
          <a class="float-right" href="#"><span class="icon icon-generic" data-icon="("></span> advanced search</a>
        </p> -->
      </form>
    </div>

    <!-- local-nav -->
    <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>
    <!-- /local-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;
}

JS