[1] University Crests
The site logo options enable you to choose whether or not you wish to display the University Crest in your header, and if so which one. There are four to choose from: square or rectagle, with or without a white border (recommended for better definition on dark backgrounds). Which you choose will depend on your overall site design, though you should also take into consideration the University's branding guidelines (PDF).
[2] Site logo
You also have the option to upload a custom log for your site. This image will be scaled to a maximum height of 115px, while mainataining the aspect ratio of the image. Uploading images that have a very wide (landscape) aspect ratio may cause layout issues at lower screen widths, it is therefore recommended that you don't upload images that with an aspect ratio greater than 2:1.
[3] Mobile logo
You can provide a different logo image for to use on mobiles and tablets (screens less than 993px wide), and the sticky navigation. This allows you to provide a version of your logo approproiate for use at a smaller scale, for example you may wish to exclude any smaller pieces of text such as a strapline.
Mobile logo sizing
Mobile logo images will be scaled to a height of 80px for tablet sizing/sticky navigation, and 40px for mobile devices.
The smallest mobile screen width supported by Mosaic is 320px. The mobile header can feature between 2 and 4 header icons:
- 'hamburger' navigation icon
- 'magnifying glass' search icon
- 'ellipsis' header links icon*
- 'user' SSO-content login icon**
Each icon occupies 40px width in the header. As a result, there is a limited amount of horizontal space available for the mobile logo.
If the mobile header features the University crest and a custom logo, the custom logo dimensions should not exceed 2:1.
If the mobile header features only a custom logo and no University crest, the custom logo dimensions should not exceed 3:1.
*Displays if Primary and/or Secondary Header links exist
**Displays if SSO-only content is enabled on the site