Implementing nav pills (experimental)

themes/hugo-casper3/assets/scss/main.scss

@@ -527,6 +527,26 @@ body{
     letter-spacing:-.5px;
     text-transform:none
 }
+.site-nav-pill{
+    position:relative;
+    z-index:100;
+    flex-shrink:0;
+    display:inline-block;
+    margin-right:-20px;
+    margin-left:30px;
+    padding:18px 0;
+    color:#fff;
+    font-size:1.7rem;
+    line-height:1.8rem;
+    font-weight:700;
+    letter-spacing:-.5px;
+    text-transform:none
+}
+.site-nav-pill img{
+    display:block;
+    width:auto;
+    height:16px
+}
 .site-nav-logo:hover{
     text-decoration:none
 }

themes/hugo-casper3/layouts/partials/site-nav.html

@@ -10,9 +10,13 @@
                 {{ range $.Site.Menus.main }}
                 <li class="nav-home" role="menuitem"><a href="{{ .URL }}">{{- .Name -}}</a></li>
                 {{ end }}
+                <!--<a class="site-nav-pill" href="/"><img src="/images/dot-red-open.png" alt="{{ $.Site.Title }}" /></a>
+                <a class="site-nav-pill" href="/"><img src="/images/dot-blue.png" alt="{{ $.Site.Title }}" /></a>
+                <a class="site-nav-pill" href="/"><img src="/images/dot-green.png" alt="{{ $.Site.Title }}" /></a>
+                <a class="site-nav-pill" href="/"><img src="/images/dot-yellow.png" alt="{{ $.Site.Title }}" /></a>-->
             </ul>
         </div>
-        
+
     </div>
 </nav>