Header and navigation
The header and navigation are the same on all the pages in MyPCC.
Jump to a component:
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.
Styling
The header has a responsive background image. It loads a cropped and resized version on medium screens and again on small screens.
Development info for Header
Stylesheet location:
/pcc/styles/general-ui/_portal-ui.scss
Example of Header
Desktop
Phone
Navigation
The navigation bar looks pretty much the same everywhere in MyPCC.
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.
Responsive behavior for Navigation
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.
Development info for Navigation
Stylesheet location:
/pcc/styles/general-ui/_navigation.scss
Example of Navigation
Desktop
Phone
