This task can be undertaken by users with the following roles: OC Site Manager and OC System Administrator.
The Utility Bar is an element that sits above your site header and contains links to important content on your sites, such as contact details, subsites, and social media links. The Utility Bar is an optional feature and will appear on every page.
The Utility Bar is fully responsive; they will appear as individual links on bigger devices, while on smaller screens, it will transform into a quick link dropdown menu.
To edit the Utility Bar:
- From the main menu, go to More > Site Management > your site > Settings > Utility Bar.
- To show the Utility Bar, ensure that the Show links on bar setting is switched to Yes. Adjustments to your Utility Bar take effect immediately, so you may want to switch it off while you're making changes.
- Select Add Link to create another link in your Utility Bar, then use the Link type dropdown menu to select which kind of link you're creating.
- Adjust the settings as needed, then select Add to Bar.
- Select Save Settings and Save.
When you add a link, you'll be able to choose from four link types – internal, external, email, or phone.
Utility Bar links settings
The following information details the settings you can adjust when adding links. You can use this information regardless of the link type, but we will specify when certain settings are for one link type.
| Field | Function |
| Link type | Use this dropdown menu to select the type of link you're creating. You can choose an internal, external, email, or phone link. This will also determine which other settings you can use. |
| Icon |
Select from a variety of icons to display your link. The icon you choose should represent the kind of link you're creating. For example, there are icons to represent the major social media platforms, as well as icons specific to email and phone links. |
| Link name | The text for the link. This should be descriptive of what you're linking to. |
| Hide name on bar (icon required for this) |
Check this box to hide the Link name on the Utility Bar. You must select an icon if you want to do this. Additionally, the Link name will still be displayed when the Utility Bar is displayed as a quick links dropdown menu on smaller devices. |
|
Page to go to (internal) URL (external) |
For internal and external links, select the page you want to link to.
|
| Open in new window | Check this box to ensure the link opens in a new browser window. Automatically opening new tabs or windows can be disorientating for the user, particularly on mobile devices, and can make it harder for users to manage their open windows, so think carefully about what setting you want to choose. |
|
Email to (Email only) |
Enter the email address you want to attach to this link. When site visitors click on the link, the browser will open a new email in their email client addressed to the email you enter in this field. |
|
Subject (Email only) |
Enter a subject line for emails. When site visitors click on the link, the browser will open a new email in their email client with the subject line already filled in. |
|
Phone number (phone only) |
Enter the phone number you want to attach to this link. When a site visitor selects this link on a mobile, their browser will prompt them to confirm they want to dial the number and make the call if they do. |
Upload icons for the Utility Bar
This task can be undertaken by users with the following roles: OC Site Designer.
Although your site will come preloaded with these icons:
- General-purpose:
- Phone
- Information
- Help
- Link
- Map Pin
- Web
- Social media:
You may want to add icons for specific purposes, such as adding different versions of social media icons or logos of other sites. We recommend uploading icons as .svg files to ensure they scale correctly across different themes.
Here's how to do it:
- Ensure that your icon is one of these file types: .svg, .png, .gif, or .jpg.
- Rename your icon using this format with the bold text replaced with your icon's file name: "i-[icon file name]". For example, an icon with the file name map_pin might be titled: "i-map_pin.svg".
- From the main menu, go to More > Themes Management > your theme > Files.
- Select Add Files and find your correctly named icon file.
- Save and Publish your theme.
You can now select your new icon from the Icon dropdown menu when adding a link to your Utility Bar.
Please note that icons are tied to the theme they're uploaded to. If you switch your site to a different theme, you will need to upload the icon to the new theme and republish them. Not doing this may cause problems if you have chosen to only show a logo for the link, as no link text will display and there will be empty space where the logo should be.