Styleguide

← Back to Styleguide

The Header and page tops

General header guidance

The full header should be used whenever possible since it provides the important links we expect members to navigate to opportunistically from everywhere.

There are some cases where we do NOT use the full header:

Page Structure

There are a few structures that will give you a 'working' page. The first thing to note is that ALL style is only applied UNDER a class="giraffe" element. This can be useful if you want to add e.g. the header to an otherwise differently-styled page governed by other CSS.

Besides that, note that there are some important pieces to make the header work

  • To add padding for the content below the nav header, you must either have class="giraffe" in the html element like: <html class="giraffe">.....<body>.... OR <body id="giraffe-wrapper" class="giraffe"> (or the same in a lower div)
  • Include a JS file that includes the Nav script component (scripts/app.js, scripts/actionkit.js, or scripts/front.js) or the mobile menu won't work 
<html class="giraffe">
  <body>
    ....
  </body>
</html>
<!-- OR -->
<html>
  <body id="giraffe-wrapper" class="giraffe">
    ...
  </body>
</html>

Full Header 

<header id="main-header" class="header">
  <div class="mo-container">
    <a href="index.html" class="logo">
      <img src="../images/logo.svg" alt="Move On Logo">
    </a>

    <div id="nav" class="mo-nav">
      <span class="mo-nav__title">Menu</span>
      <ul class="mo-nav__primary">
        <li class="mo-nav__dropdown">
          <a href="/">
            Petitions
            <button class="mo-nav__primary__caret">
              <svg><use xlink:href="#caret-down"/></svg>
            </button>
          </a>
          <ul class="mo-nav__primary__subnav">
            <li><a href="petition.html">Browse Petitions</a></li>
            <li><a href="petition.html">Start A Petition</a></li>
            <li><a href="petition.html">Manage Petitions</a></li>
          </ul>
        </li>
        <li class="mo-nav__dropdown">
          <a href="/">
            Campaigns
            <button class="mo-nav__primary__caret">
              <svg><use xlink:href="#caret-down"/></svg>
            </button>
          </a>
          <ul class="mo-nav__primary__subnav">
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 2</a></li>
          </ul>
        </li>
        <li><a href="/">Events</a></li>
        <li><a href="/">About Us</a></li>
      </ul>
      <div class="mo-nav__secondary">
        <ul class="mo-nav__secondary__top">
          <li><a href="#">News</a></li>
          <li><a href="#">Store</a></li>
        </ul>
        <ul class="mo-nav__secondary__bottom">
          <li><a href="#">Join</a></li>
          <li><a href="donate-v3.html">Donate</a></li>
          <li><a href="petition.html"><svg><use xlink:href="#document-add"/></svg>
Start A Petition</a></li>
        </ul>
      </div>

      <button class="mo-nav__close">
        <svg><use xlink:href="#close"/></svg>
      </button>
    </div>

    <button class="mo-nav__toggle">
      <svg><use xlink:href="#burger"/></svg>
    </button>
  </div>
</header>

Minimal Header

Use the minimal header when we want to avoid distraction and focus the visitor on the content -- often to complete an action. 

<div class="header">
  <div class="mo-container">
    <a href="/" class="logo">
      <img src="../images/logo.svg" alt="Move On Logo">
    </a>
  </div>
</div>

Partner Headers

When collaborating with partners we often need to step back with MoveOn-central branding. We can still work within this style-guide, but the MoveOn logo will not be on top and often another event or campaign-specific brand will be in its place

TKTK

Campaign Headers

Some campaigns have special banners to emphasize the work. When we use these, it should generally only be on the 'landing' page since we will want content central and visible above-the-fold.

TKTK

BreadCrumbs

FIXME: where to put this around div.container, row and header? Breadcrumb divs are styled so they will take up vertical space regardless of whether they are filled in. That can help javascript loading to avoid 'vertical jitter' and also help place the header below the MoveOn logo overflow below the header.
← Back to Styleguide 
<body>...
<!-- header here -->
<!-- ?TKTK anything else? -->
<div class="breadcrumb-link">
 <a href="../">← Back to Styleguide</a>
</div>

Page Menus

Especially on mobile it might be useful to show a page menu at the top of the page, so people can navigate to sub-sections of the page on mobile (and understand what's on the page). Sometimes it's even useful on desktop with a large page (for instance, this one).

For mobile-only (hidden on desktop), use class="mobile-pagemenu" otherwise use class="pagemenu" 

<!--MOBILE ONLY-->
<div class="mobile-pagemenu">
  <ul>
    <li><a href="#pagemenus">Menu Option1</a></li>
    <li><a href="#pagemenus">Menu Option2</a></li>
    <li><a href="#pagemenus">Another Option</a></li>
  </ul>
</div>
<!--BOTH MOBILE AND DESKTOP -->
<div class="pagemenu">
  <ul>
    <li><a href="#pagemenus">Menu Option1</a></li>
    <li><a href="#pagemenus">Menu Option2</a></li>
    <li><a href="#pagemenus">Another Option</a></li>
  </ul>
</div>