Navbar cta

layouts/partials/navbar-cta.html

@@ -0,0 +1,6 @@
+{{/* Placeholder file to override. Used to add a call to action (like a colored Sign Up button) to the right side of the navigation bar if the navbar_cta parameter is set in the config file. */}}
+<!--
+<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://github.com/google/docsy">
+  Download <i class="fa-brands fa-github ms-2 "></i>
+</a>
+-->

layouts/partials/navbar.html

@@ -57,6 +57,11 @@
         {{ partial "navbar-lang-selector.html" . -}}
       </li>
       {{ end -}}
+      {{ if  .Site.Params.navbar_cta }}
+        <li class="nav-item nav-cta mr-4 d-none d-lg-block">
+        {{ partial "navbar-cta.html" . }}
+        </li>
+      {{ end }}
     </ul>
   </div>
   <div class="d-none d-lg-block">

userguide/content/en/docs/adding-content/lookandfeel.md

@@ -244,6 +244,33 @@ of the following:
 [wordmark]: https://en.wikipedia.org/wiki/Wordmark
 [your logo]: /docs/adding-content/iconsimages/#add-your-logo
 
+### Adding a call-to-action
+
+You can include a call-to-action, like a sign-up or download button to the right side of the navbar.
+
+1. In your Hugo configuration file, set the `navbar_cta` parameter to true.
+
+    {{< tabpane persistLang=false >}}
+    {{< tab header="Configuration file:" disabled=true />}}
+    {{< tab header="hugo.toml" lang="toml" >}}
+    [params]
+    navbar_cta = true
+    {{< /tab >}}
+    {{< tab header="hugo.yaml" lang="yaml" >}}
+    params:
+      navbar_cta: true
+    {{< /tab >}}
+    {{< tab header="hugo.json" lang="json" >}}
+    {
+      "params": {
+        "navbar_cta": true
+      }
+    }
+    {{< /tab >}}
+    {{< /tabpane >}}
+
+1. Add the `layouts/partials/navbar-cta.html` file to your project and customize it as needed.
+
 ## Tables
 
 Docsy applies the following styles to all tables, through the class `.td-table`: