Masthead and footer

A customisable site-wide header that will contain your site name, main navigation, search and other function links along with a Jisc-wide banner.

Example of the masthead pattern

View a live example of the masthead pattern

How to use this pattern

There are 2 variants of the masthead:

  1. Default is a minimum requirement for all Jisc service websites.
  2. Focussed is an alternative pattern for user interfaces where maximum screen real-estate is required and the page is not scrollable. For example with full screen imaging or digital mapping.

Constructing your masthead

Each service requires a unique background image in their masthead - contact the team to discuss your ideas and requirements.

Key considerations
  • Accessible - The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it.
  • Meaningful - Keep your navigation meaningful. Make the links clear - someone who has never been to your site before should know immediately where the link will take them.
  • Understandable - If you need to use icons in your navigation make sure that there is text associated with them.
  • Prevalent - Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.
  • Mobile first - Designing for smaller viewports first forces you to concentrate on the most vital elements. As you consider larger viewports your functionality should become extended and enhanced.

Technical implementation

Within the masthead, navigational links to other pages contained within the website are specified using an unordered list. This is wrapped in a <nav> element to ensure a semantically correct site navigation.

Primary and secondary navigation groups can be specified using two nav elements with classes .header__nav—primary and .header__nav—secondary. Splitting the navigation into two distinct sections allows for more prominence to be given to the major navigation items which should be placed in the primary navigation block.

Within the secondary navigation block, a dropdown menu can be applied to the last element by adding the class .has-popup to the last <li> element, and the data attribute data-dropdown-item. A nested div, within the li, with class .submenu containing an unordered list is required to implement the actual submenu items.

Theming

To tailor the masthead to your site’s look and feel, a number of elements can be themed by overriding the base component styles (see the theming section on Getting Started for more information on how to apply a theme stylesheet to your site).

To add your background image to the masthead, add the following to your theme stylesheet:

.masthead__main {
  background-image: url('/ui/bannerdesign.jpg')
}

NB: To get your background image contact the team.

Additional background properties and values within the style declaration block may be required to ensure the image is presented as intended. This is dependent on the dimensions of the image in use and it’s features.

For example, the following style declaration prevents the image from being repeated along the horizontal axis, which means the colour #e85e12 will be shown to the sides of the image:

.masthead__main {
  background-image: url('/ui/bannerdesign.jpg')
  background-repeat-x: no-repeat;
  background-color: #e85e12;
}

When theming the masthead, consideration needs to be made to devices with smaller viewports. Taking a mobile-first approach to the styling, the following example shows how a solid colour is used for smaller devices, and an image used for larger ones:

.masthead__main {
  background-color: #e85e12;
}
@media screen and (min-width: 565px) {
  .masthead__main {
    background-image: url('/ui/bannerdesign.jpg')
  }
}

Colours can be applied to the navigation links using the following declarations:

.nav__item > a {
  background-color: #851b63;
  color: #fff;
}

In this case, the background colour will be set to purple, and the font to white. On a smaller device, the masthead collapses down to a dropdown. As such, if the colour of the navigation items are changed, then the colour of the collapsible menu will most likely need to be changed:

.nav__item > a {
  background-color: #fff;
  color: #333;
}
@media screen and (min-width: 757px) {
  .nav__item > a {
    background-color: #851b63;
    color: #fff;
  }
}

A customisable site-wide footer that will contain supporting information for your service and Jisc.

Example of the footer pattern

View a live example of the footer pattern

How to use this pattern

The footer pattern is divided into 3 sections

1. Service

Customisable service-specific panel for content such as:

  • utilities and / or useful links
  • contact information
  • latest blog post
  • social media icons
  • latest tweets

2. Jisc

This panel is configured with predefined content relevant to one of the four primary areas of our work: digital resources, network & IT services, advice and R&D.

3. Copyright information

The CC BY-NC-ND badge is supplied by default. If you require an alternative badge please contact user.experience@jisc.ac.uk. Information on what licence is applicable to your service can be found on the Creative Commons website.

Technical implementation

Each of the three sections are implemented as grid rows with the utility class .l-pull-left applied to ensure the background displays stretched fully to the left.

Within the sections, the grid is used to create two columns using classes .col .span-6. Then, within each column a nested grid can be used to create additional columns within the parent column, or the .linklist class can be applied to a div wrapping an unordered list to create menu footer navigation items.

A whole row can be used to display social media links. In this case, the grid row should contain one section element:

<div class="l-centre-offset row">
  <section class="social-links">
    <ul class="social-links__list">
      <li class="social-link--rsss">
        <a href="#" class="icon-rss icon--blue"><span>RSS</span></a>
      </li>
      <li class="social-link--youtube">
        <a href="#" class="icon-twitter icon--blue"><span>YouTube<span></span></span></a>
      </li>
      <li class="social-link--twitter">
        <a href="#" class="icon-twitter icon--blue"><span>Twitter</span></a>
      </li>
      <li class="social-link__twitter-name">
        <a href="#" class="social-link__twitter-name">@hairtrainUK</a>
      </li>
      <li class="social-link__latest-tweet">‘Open washing’, and other reflections from #OER15</li>
    </ul>
  </section>
</div>

To inform new visitors of the cookie policy without getting in the way of their primary journey.

example of cookie bar pattern

Example of the cookie bar pattern

View a live example of the cookie bar pattern


        <div class="cookie-bar">
          <div class="inner">
            <p class="cookie-bar__notification">We use cookies to give you the best experience and to help improve our website.</p>
            <a class="cookie-bar__link" href="#">Find out more about how we use cookies</a>
            <div class="cookie-bar__confirm">
              <button class="btn btn--3d btn--primary" href="#">Thanks for letting me know</button>
            </div>
          </div>
        </div>
    

Technical implementation

The cookie bar should be placed as the first child of the opening body tag within the DOM, to ensure it is correctly positioned at the top of the page.

It is left to the integrator to implement the behaviour of the cookie bar in a case where the user selects the accept button.