diff --git a/css/ebi-css-build/_ebi_masthead_styles.scss b/css/ebi-css-build/_ebi_masthead_styles.scss
index 3eddf22e8449591a97c5ea4aa8a2cb8811214e7d..a23dfc9921c3e052e64ffe7bbbf4065d82b1efe7 100644
--- a/css/ebi-css-build/_ebi_masthead_styles.scss
+++ b/css/ebi-css-build/_ebi_masthead_styles.scss
@@ -40,6 +40,15 @@
   .masthead-black-bar {
     background-color: $ebi-colour-dark;
 
+    > .row {
+      opacity: 0;
+
+      body.ebi-black-bar-loaded & {
+        opacity: 1;
+        opacity: unset; // show the blackbar contents after JS has strapped
+      }
+    }
+
     &,
     a,
     a:hover {
diff --git a/js/ebi-global-includes/script/4_ebiFrameworkContent.js b/js/ebi-global-includes/script/4_ebiFrameworkContent.js
index dd5254c8339e2669f2896052b79d20b0a316f404..c79a62856513cc9963ea1848a4002605ab9a755a 100644
--- a/js/ebi-global-includes/script/4_ebiFrameworkContent.js
+++ b/js/ebi-global-includes/script/4_ebiFrameworkContent.js
@@ -107,6 +107,7 @@ function ebiFrameworkPopulateBlackBar() {
       '</ul>'+
     '</nav>';
     document.getElementById("masthead-black-bar").insertBefore(barContents,document.getElementById("masthead-black-bar").firstChild);
+    document.body.className += ' ebi-black-bar-loaded';
   }
   catch(err) {};
 }