Portland Community College | Portland, Oregon Portland Community College

Global header

The global header appears (and remains the same) on all pages. It brands the page as belonging to PCC and provides top level navigation for the website.

The left side of the header includes the PCC logo, which links back to the pcc.edu homepage. The right side of the header includes the global navigation, which is divided into primary and secondary groups of links. The Get Started link opens into the mega menu, which displays important information about enrolling at PCC. The link to MyPCC is highlighted – it’s the most heavily-used link on the website and needs to be obvious at a glance.

Links in the primary and secondary navigation menus were carefully considered to determine inclusion, importance and placement. Any changes to the global header and navigation menus must be vetted through the PCC Web Team and other stakeholders.

Development info

  • Stylesheet location: /source-v6/styles/layout/_header.scss
  • The global header is part of the main PCC template, and doesn’t need to be altered on a page-by-page basis.

Styling

The global header is PCC turquoise, which adds school spirit and puts PCC’s brand identity front and center. The logo and navigation links are white to help the header visually separate from the dark content area text. The turquoise color is dark enough for the white text to be fully accessible.

The mega menu has multiple columns, each displaying important information for people looking to get started at PCC. It opens below the Get Started link, and has a dark blue background. A slick opening animation helps add visual interest and makes the site feel more modern.

The high-traffic MyPCC link is highlighted using a darker turquoise background to make it look more like a button. The link is also given optimum placement for visibility in the upper right corner of all pages.

The header is 100% the width of the screen on the homepage and a maximum of 1000px on all other pages (the homepage uses a fullscreen layout, unlike other pages on the site).

Responsive behavior

The secondary navigation items have accompanying icons on large screens, and only the icons (with hidden accessible text) appear on medium screens. There are no global navigation icons on small screens.

On small screens, the navigation condenses to a hamburger menu icon to the left of the logo. When expanded, the navigation items appear below the header. None of the items have icons.

The mega menu has three columns on large screens, two on medium screen, and one on small screens. The middle column links break into multiple columns at some screen sizes to prevent the text from wrapping.

Desktop view

Global navigation: desktop

Header: Mega menu desktop

Tablet view

Global navigation: tablet, icons only

Header: Mega menu tablet no icons

Global navigation: tablet

Header: Mega menu tablet

Phone view
Global navigation: phone
Global navigation: phone, expanded
Header: Mega menu phone