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

Markup

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>

Styling

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;
  }
}