Custom Branding Header

As seen http://hwpi.harvard.edu/hks/home

Custom HTML widget with class = "branding" containg School logo and link needs to be added.

AND

custom CSS:

<style>

.branding {
    width: 100%!important;
}
.logo img{
width:400px;
}
.region-header-second .block:first-child p:last-child {
    float: right;
    font-weight: bold;
    text-transform: uppercase;
}
.region-header-second .block:first-child p:last-child a, .region-header-second .block:first-child p:last-child a:visited {
    color: #ccc;
}
.branding-left, .branding-right {
    display: none;
}
.branding img {
    margin-left: -30px;
    width: 350px!important;
    height: auto!important;
}
.branding p {
    display: inline;
}
.branding {
    left: 0;
    position: absolute;
    top: -28px;
    width: 100%;
}
@media (max-width: 1008px) {
.region-header-second .block:first-child img {
    margin-left: 0;
    position: relative;
    z-index: 600;
    width: 300px!important;
}
.region-header-second .block:first-child p:last-child {
    display: none;
}
}
@media (max-width: 600px) {
.region-header-second .block:first-child img, .branding img {
    min-width: 300px;
}
}
@media (max-width: 520px) {
.region-header-second .block:first-child img {
    min-width: 200px;
}
}
@media (max-width: 420px) {
.region-header-second .block:first-child img {
    min-width: 160px;
}
}
</style>

See also: Layout