From 32fcc3049a19b12fe5da8cbadc8c743072b7f9f5 Mon Sep 17 00:00:00 2001
From: Helmut Merz <helmutm@cy55.de>
Date: Mon, 22 Jun 2020 10:48:38 +0200
Subject: [PATCH] menu layout improvements

---
 assets/sass/_custom.scss     |  7 +++++++
 layouts/partials/header.html | 29 +++++++++++++++--------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss
index d8a7f8f..9a19f18 100644
--- a/assets/sass/_custom.scss
+++ b/assets/sass/_custom.scss
@@ -3,3 +3,10 @@
 	justify-content: center;
 }
 
+.nav-link {
+    font-size: 130%;
+}
+
+.nav-link.active {
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4779cb8..9d8a7b5 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,24 +1,25 @@
 <header class="site-header">
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-md navbar-light bg-light">
 
   <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="{{.Site.BaseURL}}img/{{.Site.Params.logo}}" alt="{{.Site.Title}}"></a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" 
-          data-target="#navbarColor03" aria-controls="navbarColor03" 
+
+  <button class="navbar-toggler" 
+          type="button" data-toggle="collapse" 
+          data-target="#navbar1" aria-controls="navbar1" 
           aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
-  <div class="collapse navbar-collapse" id="navbarColor03">
-    <ul class="navbar-nav mr-auto pull-right">
-      {{ $currentPage := . }}
-      {{ range .Site.Menus.main }}
-      <li class="nav-item">
-        <a href="{{ .URL }}"
-           class="nav-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}"
-           title="{{ .Title  }}">{{ .Name }}</a></li>
-      {{ end }}
-    </ul>
-  </div>
+  <ul class="nav navbar-nav navbar-collapse justify-content-end"
+      id="navbar1">
+    {{ $currentPage := . }}
+    {{ range .Site.Menus.main }}
+    <li class="nav-item">
+      <a href="{{ .URL }}"
+         class="nav-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}"
+         title="{{ .Title  }}">{{ .Name }}</a></li>
+    {{ end }}
+  </ul>
 
 </nav>
 </header>