diff --git a/exampleSite/layouts/partials/menu-footer.html b/exampleSite/layouts/partials/menu-footer.html
index ed8e183396..46ed8d2ddf 100644
--- a/exampleSite/layouts/partials/menu-footer.html
+++ b/exampleSite/layouts/partials/menu-footer.html
@@ -12,8 +12,12 @@
               }
               return scheme;
             }
-            document.addEventListener( 'themeVariantLoaded', function( e ){
-              // we get the scheme for initial loading
+            function githubButtonsInit(){
+              if( !window.githubButtons ){
+                // wait for the script to load
+                setTimeout( githubButtonsInit, 50 );
+                return;
+              }
               var scheme = githubButtonsScheme();
               var githubButtonsHTML = `
                 <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
@@ -21,18 +25,16 @@
                 <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
                `;
               document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
-              if( window.githubButtons ){
-                setTimeout( function(){
-                  // we have to wait until the CSS class .default-animation has settled and recalculate the scheme again
-                  var scheme = githubButtonsScheme();
-                  document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
-                    anchor.dataset.colorScheme = scheme;
-                    window.githubButtons.render( anchor, function( el ){
-                      anchor.parentNode.replaceChild( el, anchor );
-                    });
-                  });
-                }, 400 );
-              }
+              document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
+                anchor.dataset.colorScheme = scheme;
+                window.githubButtons.render( anchor, function( el ){
+                  anchor.parentNode.replaceChild( el, anchor );
+                });
+              });
+            }
+            document.addEventListener( 'themeVariantLoaded', function( e ){
+              // we have to wait until the CSS class .default-animation has settled and and the buttons have loaded to recalculate the scheme again
+              setTimeout( githubButtonsInit, 400 );
             });
           </script>
           <script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
\ No newline at end of file