From 89cd58b950126df01bd20f6f0450b355acf0449e Mon Sep 17 00:00:00 2001
From: CharlesHopman <charleshopman99@gmail.com>
Date: Sun, 7 Oct 2018 16:52:12 +0530
Subject: [PATCH] Fixes #96 - Rearrange the top website menu

Rearrange the top website menu to;

Activities | Club's Corner | About

where under "Club's Corner" there should be the following sub-pages:
Get Started | Resources | Connect | Report | FAQ
---
 _includes/header.html | 18 ++++++++++++------
 static/css/app.css    | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 0d1452e..4013351 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -7,14 +7,20 @@
       <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
         &#9776;
       </button>
+      
       <div class="collapse navbar-toggleable-md" id="exCollapsingNavbar">
         <a class="nav-link" href="/activities/">Activities</a>
-        <a class="nav-link" href="/about/">About Clubs</a>
-        <a class="nav-link" href="/get-started/">Get Started</a>
-        <a class="nav-link" href="/resources/">Resources</a>
-        <a class="nav-link" href="/connect/">Connect</a>
-        <a class="nav-link" href="/report/#">Report</a>
-        <a class="nav-link" href="/faq/">FAQ</a>
+        <div class="dropdown">
+          <button class="dropbtn">Club's Corner</button>
+          <div class="dropdown-content">
+            <a class="nav-link" href="/get-started/">Get Started</a>
+            <a class="nav-link" href="/resources/">Resources</a>
+            <a class="nav-link" href="/connect/">Connect</a>
+            <a class="nav-link" href="/report/">Report</a>
+            <a class="nav-link" href="/faq/">FAQ</a>
+          </div>          
+        </div>        
+        <a class="nav-link" href="/about/">About</a>        
       </div>
 
       <div id="tabzilla" class="hidden-lg-down">
diff --git a/static/css/app.css b/static/css/app.css
index d72dc2d..a0732b7 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -21,6 +21,48 @@ img[alt=sheetseeimg] {
   text-align: center;
 }
 
+/*new top website menu css*/
+.dropdown-content {
+    display: none;
+    top: 69px;
+    right: 0px;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 150px;
+    text-align: center;
+}
+ .dropdown-content a {
+    margin-right: 0px;
+    padding-top: 12px;
+    padding-bottom: 8px;
+    background-color: #3bba99;
+    text-decoration: none;
+    display: block;
+}
+ .dropdown {
+    position: relative;
+    display: inline-block;
+}
+ .dropdown:hover .dropdown-content {
+    display: block;
+}
+ .dropbtn {
+    background-color: #3bba99;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    font-weight: bold;
+    line-height: 1.6rem;
+    text-transform: uppercase;
+    margin-right: 25px;
+    padding: 0px;
+    padding-top: 42px;
+    padding-bottom: 3px;
+}
+ .dropdown:hover a:hover {
+    background-color: #37ae8f;
+}
+
 /* older css */
 
 .sheetsee body {font-family: 'Source Sans Pro'; background: #fff; color: #535353;  border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 100px 20px; overflow: auto; }