CSS: use a class for the menu

We will have more use of the tag `nav` and we will need different styles
for it.

2 files changed, 7 insertions, 8 deletions

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f918823..508e259 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,5 +1,5 @@
 <header>
-  <nav>
+  <nav class='menu'>
     <a href="{{ .Site.Home.Permalink }}">{{ .Site.Home.Title }}</a>
     <ul>
       {{ $currentPage := . }}
diff --git a/static/css/custom.css b/static/css/custom.css
index 08a7c0a..b4e37bc 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -103,7 +103,7 @@ blockquote {
     font-style: italic;
 }
 
-nav {
+nav.menu {
     display: flex;
     flex: 2 0px;
     justify-content: flex-end;
@@ -112,13 +112,13 @@ nav {
     line-height: 0.2rem;
 }
 
-nav ul {
+nav.menu ul {
     display: flex;
     list-style-type: none;
     margin: 0
 }
 
-nav a {
+nav.menu a {
     padding: 1em;
     display: inline-block;
     color: black;
@@ -127,17 +127,16 @@ nav a {
     transition: all 75ms ease-in;
 }
 
-nav a:hover {
+nav.menu a:hover {
     color: #fff;
     background-color: #007d9c;
 }
 
-nav a.menu-active:hover {
+nav.menu a.menu-active:hover {
     color: #fff;
     background-color: #007d9c;
 }
 
-nav a.menu-active {
+nav.menu a.menu-active {
     color: #007d9c;
 }
-