For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Global Elements

All Drexel websites which are not under the core "drexel.edu" website have the following global elements which cannot be modified. These elements use a standard style across all Drexel websites.

  1. Utility Navigation
  2. Main Navigation
  3. Footer

Utility Navigation

  • Widths vary based on number of items in Utility Link area
  • Overall height - 37px
  • Font family - Arial
  • Font size - 11px
  • Font color - #FFFFFF

The utility navigation is comprised of the three elements below.

Site Home

  1. Font hover color - #FFC600
    • On hover reveals drop down menu - Font size - 1.1em
  2. Current menu items are displayed in bold #006699 text
    • Parent and sibling websites listed above
  3. Drop down menu item hover decoration - underline

Utility Links

Examples of Utility Links: "Contact," "Site Map," "Create Account," etc.

Utility Links are not Quicklinks

Audience Links ("Students, Staff, etc.") must appear only in the Utility Links and not in the main horizontal global navigation.

  1. Font hover color - #FFC600
  2. Thin rule between items. Color - #4b545e

Search

  1. Width - 180px
    Font color - #888888
    Font size - 15px

Main Navigation

  1. Main bar
    • Font family - Futura
    • Font color - #FFFFFF
    • Font size - 14px
    • Current menu item font color - #FFC600
    • Width - varies based on browser width
    • Height - 56px
  2. Menu item color on hover - #FFC600
    • Hover will reveal the drop down menu
  3. Menu items within drop down are the children on the section title
    • Width - 200px
    • Font family - Arial
    • Font color - #FFFFFF
    • Font size - 12px
  4. Drop down menu item color on hover - #FFC600

Footer

  • Width - 100% of the browser
  • Height - 100px
  • Background color - #FFC600
  • Box shadow (box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);) (Use vendor prefixes)
  • Font family - Arial
  • Font color - #333333
  1. Live It logo
    • Color - #07294D
    • Width - 106px
    • Height - 28px
  2. Footer links
    • Font size - 11px
    • Font hover decoration - underline
    • Thin rule between items. Color - #D6A831
  3. Social Media
    • By default, "Follow Drexel" and social media icon links are the main university's accounts
    • "Follow Drexel" name may be customized to list entity name (for example; "Follow LeBow")
    • If "Follow" heading is modified, the entity's social media must be listed below
    • If the entity does not have social media, it will be left as the default
    • If the entity only has 2 out of 4 social media accounts, the other 2 will be left off
    • Only Facebook, Twitter, Flickr and YouTube may be listed in the footer
  4. Address
    • By default, the university's main building address is shown
    • This may be modified to the department's address and phone number
    • Font size - 1.1em

Global Elements
1. Utility Navigation
2. Main Navigation
3. Footer

Utility Navigation Site Home
1. Font hover color - #FFC600
2. Current menu item is bold

Utility Navigation Site Home
3. Drop down menu item hover decoration - underline

Utility Links
1. Font hover color - #FFC600
Thin rule between items, color - #4b545e

Utility Navigation Search
1. Width - 180px
Font color - #888888
Font size - 15px

Main Navigation
1. Main bar

Main Navigation
2. Menu item color on hover - #FFC600
3. Menu items within drop down are the children on the section title

Main Navigation
4. Drop down menu item color on hover - #FFC600

Footer
1. Live It logo, color - #07294D, width - 106px, height - 28px
2. Footer links
3. Social Media
4. Address