制作物

• 【CodePen】ヘッダーロゴとグローバルナビを2行に分けたヘッダーを作ってみた

コード(index.html)

<header class="l-header">
  <div class="p-header">
    <div class="p-header__inner">
      <h1 class="p-header__logo"><a href="#" class="c-logo">Header Logo</a></h1>
    </div><!-- /.p-header__inner -->
  </div><!-- /.p-header -->
  <nav class="p-globalNav">
    <div class="p-globalNav__inner">
      <ul class="p-globalNav__items">
        <li class="p-globalNav__item"><a href="#a-menu" class="p-globalNav__link">Menu</a></li>
        <li class="p-globalNav__item"><a href="#a-menu2" class="p-globalNav__link">Menu2</a></li>
        <li class="p-globalNav__item"><a href="#a-menu3" class="p-globalNav__link">Menu3</a></li>
        <li class="p-globalNav__item"><a href="#a-menu4" class="p-globalNav__link">Menu4</a></li>
        <li class="p-globalNav__item"><a href="#a-menu5" class="p-globalNav__link">Menu5</a></li>
      </ul><!-- /.p-globalNav__items -->
    </div><!-- /.p-globalNav__inner -->
  </nav><!-- /.p-globalNav -->
</header><!-- /.l-header -->

コード(style.css)

.l-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
}

.c-logo {
  display: inline-block;
  color: #fff;
  padding: 0.375rem 0.625rem;
}

@media screen and (min-width: 768px) {
  .c-logo {
    padding: 0.5625rem 0.875rem;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .c-logo:focus, .c-logo:hover {
    opacity: 0.75;
  }
}

.p-header {
  background-color: #418DFF;
  height: 3.375rem;
}

@media screen and (min-width: 768px) {
  .p-header {
    height: 5rem;
  }
}

.p-header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: inherit;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-header__logo {
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .p-header__logo {
    font-size: 1.5rem;
    line-height: 1.33333;
  }
}

.p-globalNav {
  background-color: #d3d3d3;
  border-top: 0.0625rem solid #d3d3d3;
  border-bottom: 0.0625rem solid #d3d3d3;
}

.p-globalNav__inner {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 768px) {
  .p-globalNav__inner {
    max-width: 80rem;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}

.p-globalNav__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
}

.p-globalNav__item {
  width: 30%;
  border-left: 0.0625rem solid #d3d3d3;
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.78571;
  text-align: center;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .p-globalNav__item {
    font-size: 1rem;
    line-height: 1.6875;
  }
}

.p-globalNav__item:last-child {
  border-right: 0.0625rem solid #d3d3d3;
}

.p-globalNav__link {
  display: block;
  background-color: #418DFF;
  color: #fff;
  padding: 0.75rem 1.25rem;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

@media screen and (min-width: 768px) {
  .p-globalNav__link {
    padding: 0.875rem 1.375rem;
  }
  .p-globalNav__link:focus, .p-globalNav__link:hover {
    background-color: #FF9A08;
  }
}