Update cover to match layout from designers

2 files changed, 48 insertions, 8 deletions

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index de91e67c2..c6593ea9f 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -21,26 +21,47 @@ a.doc-table-anchor {
    width: auto;
 }
 
-// Only show the logo in the header after scrolling down the page.
+// Only show the navbar after scrolling down the page.
 .td-navbar-cover .navbar-brand {
     display: none;
 }
-.td-navbar-cover.navbar-bg-onscroll .navbar-brand {
-    display: inherit;
+.td-navbar-cover .td-navbar-nav-scroll {
+    @media (min-width: 768px) {
+        display: none;
+    }
+}
+.td-navbar-cover.navbar-bg-onscroll .navbar-brand, .td-navbar-cover.navbar-bg-onscroll .td-navbar-nav-scroll {
+    @media (min-width: 768px) {
+        display: block;
+    }
 }
 
+// Show an inner navbar as part of the cover block
+.cover-content nav {
+    @media (max-width: 767px) {
+        display: none;
+    }
+    padding: 0;
+    margin-top: 3rem;
+    float: right;
+}
 // Left align the cover block and increase text size.
 .td-default main section.td-cover-block {
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         text-align: center;
     }
 }
 .td-default main section.td-cover-block h1 {
-    padding-bottom: 5rem;
+    @media (min-width: 768px) {
+        padding-top: 0.5rem; // match padding for .nav-link
+        padding-bottom: 8rem;
+    }
 }
 .td-default main section.td-cover-block {
-    padding-top: 4rem;
-    padding-bottom: 8rem;
+    @media (min-width: 768px) {
+        padding-top: 0;
+        padding-bottom: 10rem;
+    }
 }
 .td-default main section.td-cover-block p.lead {
     @media (min-width: 768px) {
diff --git a/layouts/shortcodes/blocks/cover.html b/layouts/shortcodes/blocks/cover.html
index d602b8480..b59fa6b28 100644
--- a/layouts/shortcodes/blocks/cover.html
+++ b/layouts/shortcodes/blocks/cover.html
@@ -25,7 +25,26 @@
 <section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }} js-td-cover td-overlay td-overlay--dark -bg-{{ $col_id }}">
   <div class="container td-overlay__inner">
     <div class="row">
-      <div class="col-12">
+      <div class="cover-content col-12">
+        <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row">
+          <div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
+            <ul class="navbar-nav mt-2 mt-lg-0">
+              {{ $p := . }}
+              {{ range .Site.Menus.main }}
+              <li class="nav-item mr-4 mb-2 mb-lg-0">
+                <a class="nav-link" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"><span>{{ .Name }}</span></a>
+              </li>
+              {{ end }}
+              {{ if  (gt (len .Site.Home.Translations) 0) }}
+              <li class="nav-item dropdown d-none d-lg-block">
+                {{ partial "navbar-lang-selector.html" . }}
+              </li>
+              {{ end }}
+            </ul>
+          </div>
+          <div class="navbar-nav d-none d-lg-block">{{ partial "search-input.html" . }}</div>
+        </nav>
+
         {{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
         {{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
         <div class="pt-3 lead">