回答編集履歴

追記

2019/05/20 03:36

投稿

s8_chu

スコア14731

test CHANGED Viewed

@@ -355,3 +355,451 @@
 }
 ```
+---
+**追記**
+以下のようにすることで、質問者さんの実現したいことが行なえると思います([動作確認用リンク](https://codepen.io/anon/pen/byrKRW))。
+```CSS
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+  color: #333;
+}
+a {
+  text-decoration: none;
+}
+html,
+body,
+.wrapper {
+  height: 100%;
+}
+.header-wrapper {
+  top: 0px;
+  z-index: 3;
+}
+.topbar {
+  float: left;
+}
+.site-branding {
+  display: inline-block;
+}
+.site-message {
+  display: inline-block;
+}
+.global-nav {
+  width: 100%;
+}
+.nav-category {
+  width: 100%;
+  position: relative; /* 追加 */
+}
+.nav-category > a {
+  display: block;
+  width: 100%;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
+}
+.nav-category:first-child > a {
+  border-top: 1px solid #ccc;
+}
+.nav-container {
+  display: none;
+  position: absolute; /* 変更 */
+  width: 100%; /* 追加 */
+  z-index:1 !important;
+}
+.nav-contant {
+  position: relative;
+  z-index: 99;
+}
+.nav-contant > a{
+  z-index: 99;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 10px 5%;
+  border-bottom: 1px solid #ccc;
+  background-color: #111;
+  color: #fff;
+}
+.nav-category > a:hover,
+.nav-contant > a:hover {
+  background-color: #aaa;
+}
+.menu-hb {
+  height:100%;
+  text-align: right;
+  padding-right: 20px;
+}
+.menu-trigger,
+.menu-trigger span {
+  display: inline-block;
+  transition: all .4s;
+  box-sizing: border-box;
+}
+.menu-trigger {
+  position: relative;
+  top:10px;
+  width: 40px;
+  height: 30px;
+  padding-right: 5px;
+  cursor: pointer;
+}
+.menu-trigger span {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #000;
+  border-radius: 4px;
+}
+.menu-trigger span:nth-of-type(1) {
+  top: 0;
+}
+.menu-trigger span:nth-of-type(2) {
+  top: 13px;
+}
+.menu-trigger span:nth-of-type(3) {
+  bottom: 0;
+}
+#menu01:not(.active):hover span:nth-of-type(1) {
+  top: 2px;
+}
+#menu01:not(.active):hover span:nth-of-type(3) {
+  bottom: 2px;
+}
+#menu01.active span:nth-of-type(1) {
+  -webkit-transform: translateY(13.5px) rotate(-315deg) scale(.8);
+  transform: translateY(13.5px) rotate(-315deg) scale(.8);
+}
+#menu01.active span:nth-of-type(2) {
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 3px solid #000;
+  border-radius: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+}
+#menu01.active span:nth-of-type(3) {
+  -webkit-transform: translateY(-13.5px) rotate(315deg) scale(.8);
+  transform: translateY(-13.5px) rotate(315deg) scale(.8);
+}
+.main-img {
+  width: 100%;
+  height: 500px;
+  background: red;
+  position: relative;
+  z-index: 0 !important;
+}
+.navbar { /* 追加 */
+  position: relative;
+}
+.navbar-innner{ /* 追加 */
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+@media screen and (min-width: 700px) {
+  .header-wrapper {
+    margin: 0 10%;
+  }
+  .topbar {
+    width: 300px;
+  }
+  .global-nav {
+    width: 960px;
+    margin-left: auto;
+    font-size: 0;
+  }
+  .nav-category {
+    display: inline-block;
+    width: calc(100% / 5);
+    font-size: 1rem;
+    vertical-align: top;
+  }
+  .nav-category > a {
+    border: none;
+    border-left: 1px solid #ccc;
+  }
+  .nav-category:first-child > a {
+    border-top: none;
+  }
+  .nav-category:last-child > a {
+    border-top: none;
+    border-right: 1px solid #ccc;
+  }
+  .navbar-innner{ /* 追加 */
+    position :static;
+  }
+}
+```