add slanted bar to header menu

assets/css/main.css

@@ -280,3 +280,21 @@ footer#footer {
     color: #b3b3b3;
     margin: 40px 0;
 }
+
+.header-content {
+    position: relative;
+    display: inline-block;
+}
+  
+.header-content:before {
+    content: '';
+    position: absolute;
+    top: 0%;
+    left: -5%;
+    width: 110%;
+    height: 100%;
+    background-color: #B0E0E6;
+    transform: skewX(-15deg);
+    z-index: -1;
+}
+  

layouts/partials/header.html

@@ -1,12 +1,14 @@
 <header id="banner">
-    <h2><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h2>
-    <nav>
-        <ul>
-            {{ range .Site.Menus.main.ByWeight -}}
-            <li>
-                {{ .Pre }}<a href="{{ .URL }}" title="{{ .Title }}">{{- .Name -}}</a>{{ .Post }}
-            </li>
-            {{- end }}
-        </ul>
-    </nav>
+    <div class="header-content">
+        <h2><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h2>
+        <nav>
+            <ul>
+                {{ range .Site.Menus.main.ByWeight -}}
+                <li>
+                    {{ .Pre }}<a href="{{ .URL }}" title="{{ .Title }}">{{- .Name -}}</a>{{ .Post }}
+                </li>
+                {{- end }}
+            </ul>
+        </nav>
+    </div>
 </header>