Portland Community College | Portland, Oregon Portland Community College

Global navigation

The global navigation appears (and is the same) on all pages. It includes:

  • The PCC logo, which links back to the homepage
  • The main navigation, which links to the top-level pages in the site hierarchy and includes the mega menu
  • The helper navigation, which links to other key pages on the site

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
  • Same across all template variations.

Styling

The turquoise header is dark enough for the white navigation links 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.

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. When you tap the hamburger icon, it animates into an X, and the menu opens smoothly.

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 menu)
Header: Mega menu phone