1024px幅でレイアウトが崩れないように修正

config.toml

@@ -45,10 +45,10 @@ DefaultContentLanguage = "ja"
   images = ["img/hakoniwa/icon-310x310.png"]
   facebookAppId = "3035581286538848"
 
-[[menu.main]]
-    name = "箱庭とは"
-    weight = -100
-    url = "/docs/"
+# [[menu.main]]
+#     name = "箱庭とは"
+#     weight = -100
+#     url = "/docs/"
 [[menu.main]]
     name = "プロトタイプモデル"
     weight = -90

layouts/partials/header.html

@@ -1,40 +1,42 @@
 <div class="show-sm">
-    <div id="nav-toggle-box">
-      <div id="nav-toggle-brand">
-        <a href={{ "" | relURL }}>{{ .Site.Title }}</a>
-      </div><a data-component="toggleme" data-target="#top" href="#" id="nav-toggle"><i class="kube-menu"></i></a>
-    </div>
+  <div id="nav-toggle-box">
+    <div id="nav-toggle-brand">
+      <div id="top-brand">
+        <a href={{ "" | relURL }} title="home"><img src={{ "img/hakoniwa/icon-70x70.png"  | relURL }}></a>
+      </div>
+    </div><a data-component="toggleme" data-target="#top" href="#" id="nav-toggle"><i class="kube-menu"></i></a>
   </div>
-  <div class="hide-sm" id="top">
-    <div id="top-brand">
-      <a href={{ "" | relURL }} title="home"><img src={{ "img/hakoniwa/icon-70x70.png"  | relURL }}></a>
-    </div>
-    <nav id="top-nav-main">
-      <ul>
-       {{ $currentPage := . }}
-       {{ range .Site.Menus.main }}
-    <li><a href="{{ .URL }}" {{if  $currentPage.IsMenuCurrent "main" . }} class="active"{{end}}>{{ .Name }}</a></li>
-    {{end}}
-      </ul>
-    </nav>
-    <nav id="top-nav-extra"> 
-      <ul>
-        {{ range .Site.Menus.extra }} 
-          <li>
-            <a href="{{ .Permalink }}">{{ .Name }}</a>
-          </li>
-        {{ end }}  
-        {{ if .Site.IsMultiLingual }}
-          {{ range .Site.Languages }}
-          {{ if eq . $.Site.Language }}
-            <li><a href="#" class="active language">{{ .LanguageName }}</a></li>
-          {{ else }}
-            {{ range $.Translations }}
-            <li><a href="{{ .Permalink }}" class="">{{ .Language.LanguageName }}</a></li>
-            {{ end }}
-          {{ end }}
-          {{ end }}
-        {{ end }}
-      </ul>
-    </nav>
+</div>
+<div class="hide-sm" id="top">
+  <div id="top-brand">
+    <a href={{ "" | relURL }} title="home"><img src={{ "img/hakoniwa/icon-70x70.png"  | relURL }}></a>
   </div>
+  <nav id="top-nav-main">
+    <ul>
+      {{ $currentPage := . }}
+      {{ range .Site.Menus.main }}
+      <li><a href="{{ .URL }}" {{if  $currentPage.IsMenuCurrent "main" . }} class="active" {{end}}>{{ .Name }}</a></li>
+      {{end}}
+    </ul>
+  </nav>
+  <nav id="top-nav-extra">
+    <ul style="display: block;">
+      {{ range .Site.Menus.extra }}
+      <li>
+        <a href="{{ .Permalink }}">{{ .Name }}</a>
+      </li>
+      {{ end }}
+      {{ if .Site.IsMultiLingual }}
+      {{ range .Site.Languages }}
+      {{ if eq . $.Site.Language }}
+      <li><a href="#" class="active language">{{ .LanguageName }}</a></li>
+      {{ else }}
+      {{ range $.Translations }}
+      <li><a href="{{ .Permalink }}" class="">{{ .Language.LanguageName }}</a></li>
+      {{ end }}
+      {{ end }}
+      {{ end }}
+      {{ end }}
+    </ul>
+  </nav>
+</div>

static/css/custom.css

@@ -5,20 +5,52 @@
   content: "";
   clear: both;
 }
+
 .xPrevNextLink_prev {
   display: block;
   float: left;
 }
+
 .xPrevNextLink_prev::before {
   content: "≪";
 }
+
 .xPrevNextLink_next {
   display: block;
   float: right;
   text-align: right;
 
 }
+
 .xPrevNextLink_next::after {
   content: "≫";
 }
-
+
+#top-nav-extra ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#top-nav-extra ul li {
+  display: block;
+  margin-bottom: 10px;
+  /* 各項目の間にスペースを追加したい場合 */
+}
+
+#top-nav-extra ul li a {
+  display: block;
+}
+
+#top {
+  padding: 0 16px !important;
+}
+
+#top #top-nav-main {
+  padding-left: 0px !important;
+  border-left: none !important;
+}
+
+#top #top-brand {
+  margin-right: 16px !important;
+}