Portland Community College | Portland, Oregon Portland Community College

Header and navigation

The header is the same on all the pages in MyPCC, and the navigation looks almost the same throughout. The items change between the basic theme and the courses theme.

Development info

  • Header stylesheet location: /pcc/styles/general-ui/_portal-ui.scss
  • Navigation stylesheet location: /pcc/styles/general-ui/_navigation.scss

The header contains the simplified PCC logo, the MyPCC logo, and a welcome message. It also contains links to D2L, Google Drive, Gmail, Google Calendar, and to sign out. When viewing a course or site, it has a return link to take you back to the Home Community.

The header has a responsive background image. It loads a cropped and resized version on medium screens and again on small screens.

Desktop

Basic theme header:
Desktop and tablet header for the basic theme

Courses theme header:
Desktop and tablet header for the courses theme

Phone

Phone header for basic and courses themes

The navigation changes slightly between the basic theme and courses theme.

Basic theme

The navigation bar looks pretty much the same everywhere in MyPCC. On small screens, the menu bar collapses to a vertical menu and hamburger icon. Also on small screens, the email, calendar, and sign out icons are part of the navigation rather than the header.

During the COVID-19 pandemic, we updated the navigation to Home | My Courses | Paying for College | PCC Life | Virtual Help | Faculty | Employee | Sites.

Desktop

Basic theme navigation

Phone

Basic theme phone navigation

Courses theme

There are different menu items and a title area in the courses and sites navigation bar. On small screens, the course theme menu items replace the Home Community menu items under the hamburger icon. Also on small screens, the email, calendar, and sign out icons are part of the navigation rather than the header.

Desktop

Courses theme navigation

Phone

Courses theme phone navigation