This task is for users with the OC Site Manager or OC System Administrator roles.
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. On larger devices, it appears as individual links, while on smaller screens, it transforms into a quick link drop-down menu.
To edit the Utility Bar:
- 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 drop-down 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 can choose from four types: internal, external, email, or phone.
Utility Bar Link 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 specific settings are for one link type.
- Link type: Use this drop-down 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 for the major social media platforms and icons specific to email and phone links.
- Link name: The text for the link. This should describe 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 drop-down menu on smaller devices.
-
Page to go to (internal) or URL (external): Select the page you want to link to for internal and external links.
- Internal: Start typing the Page name of the page on your site you want to link to and select it from the list.
- External: Paste the full URL of the external page you want to link to into the URL field.
- Open in new window: Check this box to ensure the link opens in a new browser window. Automatically opening new tabs or windows can disorientate the user, particularly on mobile devices. They 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 device, their browser will prompt them to confirm that they want to dial the number and make the call if they do.
Upload Icons for the Utility Bar
This task is for users with the OC Site Designer role.
Although your site will come preloaded with these icons:
- Help
- Information
- Link
- Map Pin
- Phone
- Web
- X
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 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".
- 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 drop-down 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, upload the icon to the new theme and republish it. 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.