Update navbar styling (#564)

Author: jarrodmillman

assets/theme-css/navbar.css

@@ -31,7 +31,7 @@ nav,
   margin: 0 0 0 auto;
   width: 4rem;
   height: 4rem;
-  color: var(--pst-color-text-muted);
+  color: var(--pst-color-text-base);
 }
 .navbar > .container {
   align-items: stretch;
@@ -91,7 +91,7 @@ nav,
 .navbar-item {
   flex-grow: 0;
   flex-shrink: 0;
-  color: var(--pst-color-text-muted);
+  color: var(--pst-color-text-base);
 }
 .navbar-item img {
   max-height: 1.75rem;
@@ -113,7 +113,7 @@ nav,
 }
 
 .navbar-burger:hover {
-  color: var(--colorPrimaryLight);
+  color: var(--pst-color-link-hover);
 }
 
 .navbar-logo {
@@ -161,7 +161,7 @@ a.navbar-item:hover {
 
 /* Dropdown menu item text */
 .navbar-item.has-dropdown .navbar-link {
-  color: #999;
+  color: var(--pst-color-text-base);
   text-decoration: none;
 }
 
@@ -211,12 +211,12 @@ a.navbar-item:hover {
     padding: 0.5rem 0;
   }
   .navbar-menu.is-active {
-    background: var(--pst-color-text-muted);
+    background: var(--pst-color-surface);
     display: block;
   }
 
   .navbar-menu.is-active .navbar-item {
-    color: var(--pst-color-background);
+    color: var(--pst-color-text-base);
   }
 
   .navbar-menu.is-active .navbar-item:hover {

doc/config.yaml

@@ -37,6 +37,12 @@ params:
       url: /shortcodes/
     - title: Examples
       url: /examples/
+    - title: More
+      sublinks:
+        - title: Dropdown item
+          url: /
+        - title: Dropdown item
+          url: /
   footer:
     logo: logo.svg
     socialmediatitle: ""

layouts/partials/navbar.html

@@ -1,18 +1,17 @@
 {{- $title          := .Site.Params.title }}
 {{- $navbar         := .Site.Params.navbar }}
 {{- $navbarLogo     := .Site.Params.navbarlogo }}
-{{- $navbarLogoShow := .Site.Params.navbarlogoshow }}
 <nav id="nav" class="navbar" role="navigation" aria-label="main navigation">
   <div class="container">
     <div class="navbar-brand">
-      {{ if or (not .IsHome) ($navbarLogoShow) }}
+      {{- if or (not .IsHome) (not .Site.Params.hero) }}
       {{- if $navbarLogo}}
       <a class="navbar-item" href="{{ $navbarLogo.link }}">
         <img class="navbar-logo" src="{{ printf "/images/%s" $navbarLogo.image | relURL }}" alt="{{ default (printf "%s logo" $title) $navbarLogo.altText }}">
         <div class="navbar-logo-text">{{ default "" $navbarLogo.text }}</div>
       </a>
       {{- end}}
-      {{ end }}
+      {{- end }}
 
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
         <span aria-hidden="true"></span>
@@ -39,14 +38,8 @@
             {{- end }}
           </div>
         </div>
-        {{- else if .button }}
-        <a href="{{ .url }}" class="navbar-item">
-          <span class="button signup-button rounded secondary-btn raised">
-            {{ .title }}
-          </span>
-        </a>
         {{- else }}
-        <a href="{{ .url }}" class="navbar-item is-secondary">
+        <a href="{{ .url }}" class="navbar-item">
           {{ .title }}
         </a>
         {{- end }}