The header of a website is the easiest way to create a consistent experience across all websites. The simple header is intended to be used in conjunction with existing header navigation and layout.
Header
The standard header design consists of a garnet utility bar and drawer, FSU wordmark, canvas masthead and canvas primary navigation.
Scrolling desktop pages will show a collapsed header.
Global Utility Bar and Drawer
The global utility bar contains "Florida State University" on the left side except and a link to www.fsu.edu. This text and link are removed on the main FSU website. The scrolled version of the utility displays a truncated version along with the site's title such as "FSU | TITLE OF SITE" in this site's case. The main FSU website uses the full title.
Utility Icons
Webmail ( ), search ( ) and global menu () are the default icons included with the utility bar. Only the global menu, which displays the top-level university navigation, is required. Use Font Awesome Icons for your additional icons.
Utility Drawer
Icons may be used to open the utility drawer or link directly to another FSU website in the same window. In this example, the search drawer is exposed.
Mobile Display
Utilizing hidden-xs and visible-xs classes, the mobile and header versions differ in display. The university seal is not shown on the mobile version. Primary navigation is combined with the university's global navigation within the global menu and hidden below the masthead.
Closed Mobile Header
Open Mobile Header
Footer
The global university footer is required in Strata Three and should remain unaltered from its original form. Site-specific footers may be placed on top of the global footer and match its color scheme.
