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
Header
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:
Courses theme header:
Phone
Navigation
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 Student Guide (updated Sept 2023) | Virtual Help | Faculty | Employee | Sites.
Desktop
Phone
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
Phone
