diff --git a/agaric/css/agaric.css b/agaric/css/agaric.css
index a482717..0856d54 100644
--- a/agaric/css/agaric.css
+++ b/agaric/css/agaric.css
@@ -8026,6 +8026,15 @@ a.teaser {
 .media-list .teaser:hover .media-left .byline {
   display: block; }
 
+.hero {
+  margin-top: 52px; }
+  @media screen and (min-width: 769px), print {
+    .hero {
+      margin-top: 55px; } }
+  @media screen and (min-width: 1024px) {
+    .hero {
+      margin-top: 95px; } }
+
 .hero.is-light {
   background: #E4E5E7; }
 
diff --git a/agaric/sass/agaric/_component.hero.scss b/agaric/sass/agaric/_component.hero.scss
index f5557a9..8d4456d 100644
--- a/agaric/sass/agaric/_component.hero.scss
+++ b/agaric/sass/agaric/_component.hero.scss
@@ -9,6 +9,18 @@
 //
 // Styleguide: Componenet.Hero
 
+// The topbar-fixed is hidding the Hero banner.
+.hero {
+  margin-top: 52px;
+
+  @include tablet {
+    margin-top: 55px;
+  }
+  @include desktop {
+    margin-top: 95px;
+  }
+}
+
 .hero.is-light {
   background: $grey;
 }