Global Masthead

How to add the Penn Medicine masthead to your site

The masthead code consists of 2 parts, the HTML markup and the CSS stylesheet. Adding the masthead to your site properly requires inserting the HTML markup into your site template(s) as well as adding a link to the accompanying CSS stylesheet file which is hosted on the main PennMedicine.org web site.

In addition to the blue masthead that is used on this page there is also a white masthead available.

Follow the instructions below to add the markup and link to the stylesheet

Get the HTML code snippet

Copy the markup from the box below to paste into your site.

<!-- BEGIN Penn Medicicine Header -->
<!-- Do not make any changes to the markup in this snippet -->
<header class="penn-medicine-header">
<div class="penn-medicine-header__content">
    <a href="https://www.pennmedicine.org" class="penn-medicine-header__logo" 
        title="Go to the Penn Medicine home page">Penn Medicine</a>
    <a href="{{ Your Site URL Here }}" class="penn-medicine-header__title">{{ Your Site Name Here }}</a>
</div>
</header>
<!-- END Penn Medicicine Header -->

Don't forget to insert the name of your site and the URL of your site's home page as indicated

Add the snippet to your site

The markup code should be pasted immediately after the opening <body> element of each web page on your site.

Get the CSS stylesheet code

Copy the markup from one of the two boxes to paste into your site depending on whether you would like a blue masthead or white masthead.

Blue masthead styles

<link rel="stylesheet" href="https://www1.pennmedicine.org/styles/shared/penn-medicine-header.css">

White masthead styles

<link rel="stylesheet" href="https://www1.pennmedicine.org/styles/shared/penn-medicine-header-reverse.css">

Add the styling

Paste this link to the CSS stylesheet in you source code, before your site's own CSS stylesheet files. This will allow you to make style overrides in your site's stylesheets if any of the Penn Medicine Masthead CSS rules conflict with those of you site.

Need Help?

If you have questions or need assistance contact the Penn Medicine Web Team at PennMedicineWebmaster@uphs.upenn.edu.