Masthead light colour

By Ken Hawkins

layout masthead navigation Requires EBI Visual Framework 1.2.0

If your local masthead header look is a lighter colour.

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
<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">
      <!-- local-title -->
      <div class="columns medium-12" id="local-title">
        <h1><a href="../../" title="Back to [service-name] homepage">EBI Framework</a></h1>
      </div>
      <!-- /local-title -->
      <!-- local-nav -->
      <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>
      <!-- /local-nav -->
    </div>
  </header>
</div>

/* white on light masthead stlying */
.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;
}

JS