Header

A simple and customizable header you can drop onto any page.

It only appears squashed here because of the sites styling.

You can download the header image to add to your project by clicking the "Download Image" button below.

Rendered Component

HTML

<header class="header">
   <div class="header_top">
      <a href="https://www.brown.edu/">
      <img alt="Brown University Homepage" class="logo" src="/brown_university_logo.png" width="182" height="90" />
      </a>
      <h1 class="heading">Page Title</h1>
   </div>
   <nav aria-label="primary navigation">
    <ul class="header_bottom">
        <li>
            <a aria-current="page" href="/to-your-homepage">
                <svg fill="white" viewBox="0 0 25 22" width="25">
                <title>home page</title>
                <path xmlns="http://www.w3.org/2000/svg" d="M12.5 0c.359 0 .654.127.887.38l9.445 9.924.994 1.081c.377.533.308 1.045-.207 1.536-.515.491-1.055.491-1.622 0l-.933-.906v8.763c-.027.374-.145.665-.352.873-.208.207-.499.324-.872.349h-3.914c-.387-.031-.68-.148-.882-.35-.202-.2-.316-.491-.342-.872v-5.365h-4.404v5.365c0 .366-.108.657-.324.873-.216.216-.516.332-.9.349H4.99c-.288.013-.539-.103-.751-.35a1.233 1.233 0 0 1-.303-.872v-8.763l-.906.906c-.613.515-1.178.515-1.694 0-.515-.515-.515-1.092 0-1.73L11.613.38A1.15 1.15 0 0 1 12.5 0Zm0 2.997L6.383 9.442v10.12H7.88v-5.475a1 1 0 0 1 1-1h7.27a1 1 0 0 1 1 1v5.476h1.486V9.442L12.5 2.997Z" fill-rule="evenodd"/>
                </svg>
            </a>
        </li>
        <li><a class="header_link" href="https://www.brown.edu/about">About Brown</a></li>
        <li><a class="header_link" href="https://www.brown.edu/academics">Academics</a></li>
        <li><a class="header_link" href="https://www.brown.edu/admission">Admissions</a></li>
        <li><a class="header_link" href="https://division-research.brown.edu/">Research</a></li>
        <li><a class="header_link" href="https://www.brown.edu/life-brown">Life at Brown</a></li>
        <li><a class="header_link" href="https://events.brown.edu/">Events</a></li>
        <li><a class="header_link" href="https://news.brown.edu/">News</a></li>
    </ul>
   </nav>
</header>

CSS

.header {
    font-family: CircularStd, Arial, Helvetica, sans-serif;
    letter-spacing: 1.75px;
}
.header_top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}
.logo {
    padding-right: 2rem;
    border-right: 1px solid #222;
}
.heading {
    font-size: 1.125rem;
    line-height: 1.4444444444;
    padding-left: 20px;
    font-family: CircularStd, sans-serif;
    font-weight: 500;
    color: #222;
}
.header_bottom {
    background-color: rgb(78, 54, 41);
    box-shadow: rgb(78, 54, 41) 0px 0px 0px 100vmax;
    clip-path: inset(0px -100vmax);
    background: #4E3629;
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 0;
    list-style: none;
    flex-wrap: wrap;
}
.header_bottom, li {
    margin: 0;
}
.header_link {
    color: #fff;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
}
.header_link:hover {
    opacity: 0.9;
    border-bottom: 1px solid #fff;
}
@media (max-width: 768px) {
    .header_bottom {
        flex-direction: column;
    }
}