Portfolio Hero Header With Logo

By Kevin Ball

portfolio hero menu header navigation nav

How do I use This?

A simple portfolio hero header with logo.

HTML

<header class="portfolio-hero-header">
  <img class="portfolio-hero-header-logo" src="https://placehold.it/200"/>
  <h1 class="portfolio-hero-header-h1">My Portfolio</h1>
  <ul class="portfolio-hero-header-description">
    <li>Portfolio Example</li>
    <li>Super Clean</li>
    <li>Super Simple</li>
  </ul>
  <ul class="portfolio-hero-header-menu">
    <li><a class="button primary" href="#">Link 1</a></li>
    <li><a class="button primary" href="#">Link 2</a></li>
    <li><a class="button primary" href="#">Link 3</a></li>
  </ul>
</header>

$portfolio-hero-header-background-color: $light-gray;

.portfolio-hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: $portfolio-hero-header-background-color;
  padding: 2rem 0;
}

.portfolio-hero-header-description {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;

  li {
    flex: 1 0 200px;
    text-align: center;
    padding: 0 1.25rem;
    position: relative;
    white-space: nowrap;

    &:before {
      content: "*";
      position: absolute;
      left: 0;
      top: 5px;
    }

    &:first-child:before {
      content: "";
    }
  }
}

.portfolio-hero-header-menu {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;

  li {
    margin: 1.25rem;

    a {
      padding-left: 1.875rem;
      padding-right: 1.875rem;
    }
  }
}

.portfolio-hero-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #e6e6e6;
  padding: 2rem 0;
}

.portfolio-hero-header-description {
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}

.portfolio-hero-header-description li {
  -webkit-flex: 1 0 200px;
      -ms-flex: 1 0 200px;
          flex: 1 0 200px;
  text-align: center;
  padding: 0 1.25rem;
  position: relative;
  white-space: nowrap;
}

.portfolio-hero-header-description li:before {
  content: "*";
  position: absolute;
  left: 0;
  top: 5px;
}

.portfolio-hero-header-description li:first-child:before {
  content: "";
}

.portfolio-hero-header-menu {
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}

.portfolio-hero-header-menu li {
  margin: 1.25rem;
}

.portfolio-hero-header-menu li a {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

Portfolio Hero Header With Logo

By Kevin Ball

Sticky Top Bar

Menu with Fancy Active State

Hover Underline Menu

Portfolio Hero Header With Logo

By Kevin Ball

Similar Building Blocks

Sticky Top Bar

Menu with Fancy Active State

Hover Underline Menu