Improved navigation menu for multiple menu items

jwillmer · Jul 15, 2017 · 18aaf75 · 18aaf75
1 parent 2b27229
commit 18aaf75
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -8,8 +8,7 @@
     <h1 class="page-title"><a href="{{ "/" | absolute_url }}" title="{{ site.title }}">{{ site.title }}</a></h1>
     <h2 class="page-description">{{ site.subtitle }}</h2>
     <div class="nav">
-        <ul>
-            <li><a class="page-link" href="{{ "/" | absolute_url }}" title="Home">Home</a></li>
+            <a class="page-link" href="{{ "/" | absolute_url }}" title="Home">Home</a>
 
             {% assign pages = site.pages | sort:"weight"  %}
             {% for my_page in pages %}
@@ -21,9 +20,8 @@ <h2 class="page-description">{{ site.subtitle }}</h2>
             {% endif %}
 
             {% if title and my_page.visible != false %}
-            <li><a class="page-link" href="{{ my_page.url | absolute_url }}" title="{{ title }}">{{ title }}</a></li>
+            <a class="page-link" href="{{ my_page.url | absolute_url }}" title="{{ title }}">{{ title }}</a>
             {% endif %}
             {% endfor %}
-        </ul>
     </div>
 </header>
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -1,9 +1,11 @@
 // header
 .main-header {
-    margin-bottom: 40px;
-    padding-top: 10rem;
+    margin-bottom: 50px;
+    padding-top: 8rem;
     background-size: cover;
     background-position: center;
+    display: flex;
+    flex-direction: column;
 
     &.has-cover {
         .page-title,
@@ -21,7 +23,6 @@
         }
     }
 
-    .nav,
     .page-title,
     .page-description {
         width: 90%;
@@ -30,29 +31,26 @@
     }
 
     .nav {
-        margin: 40px auto 50px;
-        padding-bottom: 20px;
-
-        ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        li {
-            min-width: 80px;
-            margin: 5px;
+        margin: 40px auto 20px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        max-width: 90%;
+
+        a.page-link {
+            margin: 5px 10px;
             display: inline-block;
-            font-size:  16px;
+            font-size: 16px;
             text-transform: uppercase;
         }
     }
 
     .page-title {
-        margin: 0 auto 15px;
         a {
             font-family: Mrs Saint Delafield;
             font-size: 70px;
+            word-spacing: 15px;
+            line-height: 1.2;
             text-decoration: none;
             text-shadow: 1px 1px 5px rgba($color-black, 0.3);
         }
@@ -67,9 +65,16 @@
     }
 }
 
-.nav:before, 
-.nav:after, 
-.site-footer:before, 
+.nav:before,
+.nav:after {
+    content: '';
+    padding: 0 15px;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, rgba($color-black,0) 0%,rgba($color-black,1) 50%,rgba(0,0,0,0) 100%);
+}
+
+.site-footer:before,
 .author-info:after {
     content: '';
     display: block;

diff --git a/_sass/media500.scss b/_sass/media500.scss
@@ -1,4 +1,7 @@
 @media only screen and (max-width: 500px) {
+    .main-header .page-title a {
+        font-size: 15vw;
+    }
 
     dl {
         display: flex;