Header

There are two header styles available:

Standard header

The Standard header is designed to accomodate a number of elements within the header (there are nine elements which can  be included in your site’s header area) and consist of three 'rows'; topbar, branding and navigation:

If you have most header elements enabled, the Standard header is likely to be an apporpriate choice.

The Standard header includes the option to set the Site Logo(s) to overlap the topbar.

Minimal header

The Minimal header only consists of two rows, whereby the navigation is incorportated into the branding row:

This arrangement makes for a cleaner design and works best when you have fewer header elements enabled.

There are two styles available for your search bar, which appears on your site header and on the search results page.

One style defines the text input area and submit button using background colour and places the submit button to the right of the input field, the other style defines the input area with an underline colour and places the submit button to the left of the input field.

Search break point

For minimal header the search bar sits in line with the main menu. If viewed on a smaller screen, it will move above the main menu, to give the menu more space. This setting gives you the ability to configure whether you want the search bar to be in line with the main menu for smaller screen sizes (i.e. if you have few items in your main menu) or only to allow this for particularly wide screen sizes (i.e. if you have many items in your main menu, and require more space). Setting it too low risks the search bar overlapping with your navigation on smaller screens. The default Mosaic break point is 1450px. The search bar for the standard header is always above the main menu. 

[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

The Social media links section allows you to provide links to any social media accounts associated with your site and allocate an approporiate icon for the link. Any existing social lnks will be listed:

You can control the order of the links by dragging items up and down the list by the drag handles (1) and clicking on 'Save order' (2).

To add a social media link, click the 'Add new social link' button (remember to save any reordring you have done beforehand). This will take you to the Create Social Media Link form page:

The Title field will be be the name used in the list of Social Links mentioned above. Note that this is not the text that will be used in the link itself.

The Icon name is used to select an approporiate Font Awesome icon for your link. The form provides a link the Font Awesome cheatsheet listing all available icons and their names. Most popular social media platforms are available. Your chosen icon is what will be displayed on your site.

The Link element consists of two fields, the Title field will be included in the Title attribute of the link (which is important for both accessibility and SEO), the Link field is the url of your social media account (e.g. https://twitter.com/ox_it)

The Header links section allows you to place links to approporiate websites and pages on your own site which are regularly accessed by your end-users in the header of your site and allocate an approporiate icon for the link. Any existing header links will be listed:

You can control the order of the links by dragging items up and down the list by the drag handles (1) and clicking on 'Save order' (2).

To add a header link click the 'Add new header link' button (remember to save any reordring you have done beforehand). This will take you to the Create Header Link form page:

The Title field will be be the name used in the list of Header Links mentioned above. Note that this is not the text that will be used in the link itself.

The Icon name is used to select an approporiate Font Awesome icon for your link. The form provides a link the Font Awesome cheatsheet listing all available icons and their names. Your chosen icon is will be displayed along with the link text.

The Link element consists of two fields, the Title field will be the shown as the text for the link.

The Mobile version of the header can be configured to be either consist of two stacked 40px height regions, or a single 40px height region.

The default setting is for the Mobile header to consist of two regions. To toggle between the double- and single-height Mobile header, use the 'Display the top bar in the mobile header' checkbox.

Mobile header elements

There are two mobile header elements which always display:

• Search - uses the  Font Awesome 5 icon
• Menu - using the  Font Awesome 5 con

There are four mobile header elements which display depending on configurations in the Site Settings:

• University crest (configured in Site Settings > Header > Site logo)
• Login - uses the  Font Awesome 5 icon (this icon is displayed if Oxford-only content restriction is enabled on the site, see Site Settings > Visibility documentation)
• Primary and Secondary Header links - uses the  Font Awesome 5 icon
• Site Home link - displays as a 'home' icon by default. A custom logo specifically for use in the mobile header and sticky navigation can be uploaded (configured in Site Settings > Header > Site logo). The custom logo will display instead of the 'home' icon

Double-height mobile header

In the double-height mobile header the elements are positioned in either the top or bottom regions.

Mobile top region elements:

• University crest
• Login
• Primary and Secondary Header links

Mobile bottom region elements:

• Home link/Custom mobile and sticky navigation logo
• Search
• Menu

Output from a Mosaic webpage: Double-height mobile header displaying six elements (University crest, Login icon, Header links icon, Home icon, Search icon, Menu icon)

Single-height mobile header

In the single-height mobile header, the elements are positioned in the order:

• University crest
• Home link/Custom mobile and sticky navigation logo
• Login
• Primary and Secondary Header links
• Search
• Menu

Output from a Mosaic website: Single-height mobile header displaying six elements (University crest, Login icon, Header links icon, Home icon, Search icon, Menu icon)

*Header top bar and footer background image configuration is available on request. Site Administrators can request the functionality from the Mosaic web platform team by contacting oxfordmosaic@it.ox.ac.uk.

A background image can be applied to the header top bar. When applied, the background image overrides the colour setting that is set for the top bar background; the text colour setting still applies. The background image is set to tile (repeat) across the region it has been placed in. Therefore, if a small image is uploaded, it will repeat to fill the area.

Please note that when placing a background image, you need to consider the legibility of the text that will appear on top of it. To ensure text legibility, we recommend that you:

• use images that are predominantly the same tone (i.e. mostly dark or most light)
• use images that are either mostly dark or mostly light (avoid images which are mostly mid-tone)
• set the text colour of the text appropriately (i.e. very dark text on a light image, or very light text on a dark image)
• once in place, review your background image / text colour combination to assess the legibility

Add a top bar background image

To add a background image to the top bar:

• click 'Select a top bar background image'
• on the top bar and footer background images page, under the 'Top bar background image' section, click 'Browse'
  
  
• select an image from the Media Browser or upload a new image
• once the preview has loaded, click 'Save configuration'