Skip to navigation | Skip to main content | Skip to footer
Menu
Search the Staffnet siteSearch StaffNet
Search type

Header and footer

Most external-facing websites use the header and footer shown below which are incorporated in the standard templates. The Staffnet website uses a different header which is also part of the Steffnet templates and unique to the site.

Standard header

The header for websites should include the University logo (specifications below), site name, search box (if used) and links of the primary navigation (desktop) or menu icon (mobile). 

Header desktop image
Header (desktop)
Header for desktop (sub-brands)
Header for sub-brands (desktop)
Header mobile
Header (mobile)
Header for mobile (sub-brand)
Header for sub-brands (mobile)

1 — Site name

The site name should be vertically centred with the midline of the purple tab of the logo in desktop versions. For mobile versions, the name should be positioned below the logo. If long, the site name could wrap onto two lines.

  • Font: Open Sans
  • Font size: 24 pixels (can be reduced to 22px to ensure header works responsively on all screen sizes)
  • Font weight: 400
  • Font line height: 1.2 times of font size
  • Font colour: #6B2C91

2 — Main navigation

The main navigation should include a home icon at the start (which should link to the website home page). The use of megamenus is optional.

  • Font: Open Sans Light
  • Font colour:#333333 or #fff
  • Font size: 24 pixels (This font size is a guide value and is provided under the assumption that all of the top-level menu items fit on screen horizontally. It may be necessary to adjust the font size if there are a large number of top level menu items).
  • Background colour: #ffffff or #6B2C91 or Faculty colour

 

3 — Search icon

If you're using the search icon, it should ideally be located top right of the page. In desktop versions add the word 'Search' alongside the icon and enclose it within a box with rounded corners.

  • Font: Open Sans
  • Font size: 22px (can be reduced to 20px to ensure header works responsively on all screen sizes)
  • Box rounding border radius: 10 pixels
  • Font colour: #333333

Standard footer

The footer for websites should include contact information, social icons (if used) and standard links to disclaimer, copyright etc.

Footer desktop
Footer (desktop)
Footer mobile
Footer (mobile)

1 — Headings

Font: Open Sans Light 
Size: 18 pixels 
Line height: 1.4 
Colour: #FFFFFF

2 — Body

Font: Open Sans
Size: 16 pixels 
Line height: 1.5 
Colour: #AAAAAA

3 — Social media

Social media icons must be the official icons. 
Height: 40 pixels

4 — Compulsory footer information

Font: Open Sans
Size: 14 pixels 
Line height: 1.5 
Colour: #AAAAAA


It should include links to disclaimer, data protection information, copyright notice, accessibility, freedom of information, charitable status and the University's Royal Charter Number: RC000797. These could link to the University pages or equivalents on your own site if necessary.