Setting up Your Site Header and Footer

Customize your site-wide header and footer elements.

Flex UI Classic

Flex UI is available to all UBCMS users now. Learn more.

A Specialist role in the UBCMS is required to edit these files but we strongly encourage your technical lead be directly involved with any changes to these pages.

On this page:

Accessibility
  • An H1 is required on every page.
  • Custom code must be accessible
  • Third Party Content Must Be Accessible

> Read more.

Last reviewed: September 22, 2021

Overview

Every UBCMS site has a Header and a Footer that are displayed throughout your site. These are stored as special pages in your site's Site-Wide Configuration folder (under your home page but hidden from the site navigation).

Each page can hold select regular components plus special components developed just for their use. These components will be listed in the Components when you are editing those pages.

Please be very carefully making changes as they will be reflected throughout your site.

screenshot of Site-Wide Configuration folder in the Sites Console.

Site-Wide Configuration folder

Old Brand Cleanup

Please unpublish then delete any -oldbrand header or footer files left over from the 2017-18 brand transition.

Editing the Header

Open the Header page. You will now see just your site's header elements, and the Components Browser will show any applicable items including components designed specifically for this page.

Here you can modify your site's header to reflect your organizational identity and affilliations and provide additional navigation links for key tasking, audience and social media.

Headers can have several components, although not all will occur on every site. Usually they are implemented in this order, from the top o fthe page down:

  1. UBCMS system-wide header
    • Present on all UBCMS pages, the system header cannot be edited.
  2. Emergency Alert Banner
    • Once added, this component will automatically display any emergency UB Alert messaging.
  3. Header
    • Your site's master header, with branding as well as supporting social media and navigational elements.
  4. Mobile Menu
    • This is required for most sites to generate navigation on small screen devices using RWD.
  5. Top Navigation
    • The main horizontal navigation bar with its dropdowns can be added here using this component, but it cannot be edited here. The UBCMS builds it dynamically from your site's secondary pages.
    • Jumbo Top Navigation is also turned on here.  
  6. Breadcrumbs
    • Secondary navigation shows your users their location within your site. Can be in the header and the footer, as desired.

Customizing Your Header

It is possible to create custom headers, but this step requires great care to follow UB brand and accessibility rules and you will need to get special permission for an exception to a traditional lockup.

This is for experts only, please contact the DCT Help Desk if you are considering a custom header.

Developer Tip

To work correctly, tracking codes like Google Analytics can be placed in an HTML Snippet on the header (or footer), or in the Page Properties of your site's home page, but NOT in the header or footer's Page Properties.   

Editing the Footer

Open the Footer page. You will now see just your site's footer elements, and the Components Browser will show any applicable items including components designed specifically for this page.

Here you can modify the elements in your site's footer, including the main unit title, parent affiliation(s), and additional navigational links for key tasking, special audiences, and your social media channels.

All of these features are housed in the Fat Footer Container. This supports several layout options (simple to advanced), with additional space for links and content.

Adjusting this Fat Footer Container, sites can have a 'simple' or 'enhanced footer,' plus an optional 'fat footer,' with the simple or enhanced footer displayed at the bottom of the page just above the mandatory UBCMS system-wide footer.

The 'simple footer' holds identity and contact details, while the 'enhanced footer' holds those same identify and contact details, plus some additional elements (usually links). The optional 'fat footer' allows multple columns that typically link clusters and a groups of social media buttons.

Footer Best Practices

Jakob Nielsen's post "Footers 101" provides a handy overview including tips and shortfalls.

Accessibility

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)