fixed issue #453 nav highlight

100Automations · Sep 20, 2021 · 628bb15 · 628bb15
1 parent 919dcbd
commit 628bb15
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/_data/nav.yml b/_data/nav.yml
@@ -2,13 +2,13 @@
   link: "/"
 
 - name: Press
-  link: press-kit/press-kit-index
+  link: /press-kit/press-kit-index/
 
 - name: About
-  link: about
+  link: /about/
 
 - name: Guides
-  link: all_guides
+  link: "/all_guides/"
 
 - name: Bios
-  link: press-kit/all_bios
+  link: /press-kit/all_bios/
diff --git a/_includes/Default/header.html b/_includes/Default/header.html
@@ -7,10 +7,11 @@
       <div class="spacer"></div>
       <!-- Navigation -->
       <nav class="header_nav_list">
-        <a disabled="true" class="nav_item" href="{{ '#ato_grid' | relative_url }}">Automations</a>
-        <a disabled="true" class="nav_item" href="{{ site.data.nav[3].link| relative_url }}">Guides</a>
-        <a disabled="true" class="nav_item" href="{{ site.data.nav[2].link | relative_url }}">About</a>
-        <a disabled="false" class="nav_item" href="{{ site.data.nav[1].link | relative_url }}">Press</a>
+        <!-- {{ page.url }} -->
+        <a disabled="true" class="nav_item  {% if page.url == '/' %} active_nav {% endif %}" href="{{ '#ato_grid' | relative_url }}">Automations</a>
+        <a disabled="true" class="nav_item {% if page.url == '/all_guides.html' %} active_nav {% endif %}" href="{{ site.data.nav[3].link| relative_url }}">Guides</a>
+        <a disabled="true" class="nav_item {% if page.url == '/about.html' %} active_nav {% endif %}" href="{{ site.data.nav[2].link | relative_url }}">About</a>
+        <a disabled="false" class="nav_item {% if page.url == '/press-kit/press-kit-index.html' %} active_nav {% endif %}" href="{{ site.data.nav[1].link | relative_url }}">Press</a>
       </nav>
     </div>
   </header>

diff --git a/_sass/includes/Default/header.scss b/_sass/includes/Default/header.scss
@@ -13,6 +13,9 @@ header.header{
             flex-flow: nowrap;
             align-items: center;
             justify-content: center;
+
+
+
             a.nav_item {
                 font-family: $poppins;
                 padding: 15px 0;
@@ -22,18 +25,25 @@ header.header{
                 text-align: center;
                 position: relative;
                 width: auto;
-                margin: 0 16px;
+                // margin: 0 16px;
+                padding: 15px 16px;
                 text-align: center;
                 order: 3;
                 text-decoration: none;
                 color: $tabgrey;
+                font-weight: 500
+            }
+
+            a.active_nav {
+                font-weight: 700;
             }
 
             ;
             a.nav_item:hover{
-                font-weight: bold;
+                font-weight: 700;
             }
         }
+
 
     }