The main menu appears in the sidebar on desktop and as a fixed footer on mobile. You can customise its appearance and functionality to reflect your brand and ensure accessibility - including colours, logo, CTA placement, and which items appear in the footer.

How to Set It Up

Prerequisites

• Your approved brand colour palette (including HEX or pre-configured theme colours)
• A white version of your logo, if sidebar/footer background makes the coloured logo unreadable.

Navigation steps

1. Navigate to the menu styling settings: Go to CMS > Site Options, click the Theme tab, scroll to the Elements section and select the Sidebar/Footer tab if not already selected.
2. Customise styling
   1. Logo: Upload a logo override to ensure visibility against your selected background colour. This will replace the main site logo only in the menu area.
   2. Background Colour: Select a background colour from your theme settings (e.g. “Background dark”).
   3. Text Colour: Choose a text colour that contrasts clearly with your background colour. This affects menu labels, icons, and link text.
   4. Accent Colour: Set the colour used for the collapse button text within the menu.
   5. Active Colour: Choose the background highlight for “active” menu sections (e.g. selected sidebar item or active footer button).
   6. Active Text Colour: Select the text colour for active section titles. Ensure this also contrasts well with the Active Colour.
3. Set CTA placement: In the CTA Position dropdown, choose whether call-to-action buttons appear at the top or bottom of the sidebar.
4. Configure accessibility mode styling:
   1. Toggle & Tooltip Background Colour – sets the background of the accessibility toggle and tooltips
   2. Tooltip Text Colour – choose a readable text colour for any help or hover info
5. Manage footer items:
   1. The footer bar (mobile) can display up to five core features:
      1. Menu – shows full sidebar contents, CTAs, and social/legal links
      2. Map
      3. Event
      4. Personalise
      5. Checklist
   2. These items appear in a fixed order on mobile, as listed above. Their priority is based on availability; if a feature is disabled or not relevant (e.g. no Checklist is targeted for the user’s taxonomy), the next available item will automatically take its place. This applies to both the persistent footer and the expanding footer menu (e.g. Chat to Students may appear in the Checklist slot if Checklist is unavailable). The display order cannot be changed on either mobile or desktop
6. Sidebar and Footer items can be hidden in two ways:
   1. Via CMS settings – disable default features under Site Options, e.g., going to Map Settings and disabling the map will hide the map from the sidebar and footer.
   2. Via URL query parameters – add specific query strings to hide individual items when linking

Best Practices & Use Cases

• Always ensure contrast: Use the WCAG colour contrast checker to confirm your background and text colours meet accessibility standards.
• Use “active” colours purposefully: Highlight the current section without making it visually overpowering.

FAQs & Troubleshooting

• How do I change the text labels in the menu, like “Chat to our students” or “Interact”: Go to CMS > Site Options > Strings, then choose the relevant tab (e.g. Sidebar/Footer). 

Related Articles

• Hide parts of the UI with query parameters