Menus, Utility Bar & Footer | Web Theme User Guide

You can add, move, or delete content in the main navigation, utility bar, and footer when creating or editing content.

Main Navigation

All menu items in the main menu need a "parent" (top-level) item. For the parent items in the main menu, the main menu itself is the "parent." Additional items are considered "child pages" (sub-pages) of the parent items. Child pages will show up in a local (sidebar) menu from the parent item.

In desktop, only the main menu (level 1) links are displayed. Level 2 links are displayed in a mega menu that take up the entire row. The first link, usually the landing page or 'Overview', is always separated in its own column. Only Level 1-2 links are displayed in the main navigation.

Open Mega Menu example, UCSB Web Theme Demo Site

To get started, the recommended way to add menu items is by creating a basic page. When editing the page, the right hand side of the page includes information about the menu, called 'Menu Setting'. From there, select 'Provide a Menu Link' and create a menu link title (it can be the same as the page title or it can be customized) and then using the 'Parent Link' dropdown, designate the page's placement either as a parent (Level 1) or a child to the parent (Level 2).

Reorder the Menu items

Admin > Structure > Menus

Main navigation > Edit

Toggle the crossbar (left column) or use row weights (right corner)

Secondary Menu

The secondary menu is an optional menu that sites under the main navigation, separated by a block header, and runs across the row across all devices. The purpose of this menu is to lengthen the menu items that can ve displayed, which is normally two (the parent and the child). This extends the menu system one additional level. The number of items in the secondary navigation should be kept to 3-5 items or fewer, especially if there are long menu titles that may wrap at times.

If you do not wish to use a Secondary Menu, consider using the "Quick Links" menu instead

Read more about how to make a secondary menu

Utility Bar

Located at the top of your website, the utility bar will allow visitors to quickly access the information they are looking for. It consists of various links that you can add/edit as needed. You can also change the bar color to match your site's color palette.

Alter the Utility Bar by going to: Content > Site Settings > Utility bar
example of where to find the utility bar settings

Quicklinks

The Quick Links menu is an optional menu that will show up in the Utility Bar region and pops open a list of links upon a click. There is no set amount of links you can set but 4-5 is the recommended amount. If you choose not to use this, simply go to the Menu where the links are located and delete each one. If all are removed the Quicklinks Menu will not appear.

Structure > Menus > Quicklinks
'Information For' is hard-coded into the Quicklinks Menu and not changeable.

Give Link

You have the option to show/hide the Give link, as well as replace the link name with something else. The Give link should link to the fund of your area on the giving site, so please update the generic link accordingly as right now the link points to the main UC Santa Barbara Give page. Either point to a specific url or hide the link altogether.

Alter the Give Link by going to: Content > Site Settings > Utility bar

Highlighted Link

This highlighted link section allows you to change the background color to draw visitors' attention to an important link. This can be an internal or external link. We recommend using an internal link to keep visitors on your site.

Highlighted Link screenshot

Go to site settings: /admin/content/site-settings
Click the Highlighted link link or the adjacent Edit button (on the right).
Enter the full URL and Link Text in the provided fields

Footer

The footer section contains the contact information, social media, and a list of links that are helpful for your site visitors. Additional columns (like the one labeled Links and Resources) can be added to your site.

Web Theme site footer sample

To add Contact Info and add more Columns: Content > Site Settings > Footer Link(s)
To add or remove the Social Media Icons: Content > Site Settings > Social Media
To change the Site Name (replaces UCSB Web Theme name): Configuration > Basic Site Settings

Updating Twitter icon with X

Content > Site Settings > Social media
Replace the Twitter URL with the X URL (e.g. https://x.com/ucsantabarbara)
Change the Link text to "X"
Clear all caches

Note: If the X icon doesn't display, your site likely has a custom theme that overrides our templates. You will need to replicate the changes we made in the framework to your site templates.

Page Title

For the Basic Page content type there is an option to hide the page title. Sometimes the design choices call for the elimination of a page title or the need to be less redundant calls for the elimination of the page title. When the Hide Title box is checked on the back end, the title is hidden with a special class that communicates with assistive technologies.

example screenshot of how to hide a page title

If the Hide Title checkbox is not present inside Title Enhancements, it will need to be created manually:

Structure> Content Types > Basic Page > Manage Fields
Create New Field > Boolean > Continue
The field must be called Hide Title (Machine name: field_hide_title) > Save Settings
From Manage Form Display: move Hide Title field to Title Enhancements section
From Manage Display: move Hide Title field to the Disabled section.