SubSpace and Linchpin Theme not working properly

Problem

When using SubSpace Navigation and the Linchpin Theme Add-on the SubSpace Navigation bar is not integrated properly.

Solution 1 - Modifying the Linchpin Theme

Add the following code snippet to the Custom JS in the Advanced section of the Linchpin Theme Configuration

// START: Move Subspace Navigation Menu into Linchpin menu bar
AJS.toInit(function(){
   var $subspaceMenu = AJS.$("#navigationbarpro").detach();
   AJS.$("#linchpin-header #sub-header").replaceWith($subspaceMenu);
});
// END: Move Subspace into Linchpin menu bar

Add the following code snippet to the Custom CSS in the Advanced section of the Linchpin Theme Configuration

/* START: Move Subspace into Linchpin menu bar */
#navigationbarpro {
   float: left;
   width: 100%;
}
  
#navigationbarpro .aui-navgroup-horizontal {
   border-top: none;
   border-bottom: none;
}
  
#navigationbarpro .aui-navgroup-horizontal .aui-nav > li.folder > a {
   padding: 10px;
}
/* END: Move Subspace into Linchpin menu bar */

Solution 2 - Modifying Confluence' custom HTML

add the following script to the custom HTML section in "At end of the HEAD"

<script type="text/javascript">
    jQuery(document).ready(function() {        
        var observerOverlayHeader;
        var observerSidebar;        
    
        var fixTheme = function() {
            jQuery('#navigationbarpro .aui-navgroup.aui-navgroup-horizontal').css('margin', '0px');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-secondary').prependTo('#navigationbarpro .aui-navgroup-inner');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu').css('clear', 'inherit');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu').css('float', 'none');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu .aui-nav').css('float', 'none');
            
            var subspaceNavigationHeight = jQuery('#navigationbarpro').height();
            var headerMessage = jQuery('#header-precursor');
        
            if(AJS.Meta.get('page-id') === undefined) {
                if(AJS.Meta.get('space-key') === undefined) {
                    jQuery('#page .PageContent').css('margin-top', subspaceNavigationHeight + 'px');
                } else {
                    jQuery('#page .ia-splitter').css('margin-top', subspaceNavigationHeight + 'px');
                }            
            } else {
                if(observerOverlayHeader !== undefined || observerSidebar !== undefined) {
                    observerOverlayHeader.disconnect();
                    observerSidebar.disconnect();
                }
                
                jQuery('#page .ia-splitter').css('margin-top', subspaceNavigationHeight + 'px');
                
                Subspace.lastScrollTop = -1;
                observerOverlayHeader = new MutationObserver(function(mutations) {
                  mutations.forEach(function(mutation) {
                    var header = jQuery('#main-header.overlay-header');
                    if(header.length > 0) {                        
                        var newValue = header.css('top');
                        var st = $(document).scrollTop();
                        
                        if (st < Subspace.lastScrollTop || Subspace.lastScrollTop == -1){
                            setTimeout(function() {                                
                                newValue = (180 + subspaceNavigationHeight) + 'px';
                                header.css('top', newValue);
                            }, 20);
                        }
                        
                        if (st > Subspace.lastScrollTop && Subspace.lastScrollTop != -1){
                            setTimeout(function() {                                
                                newValue = (120 + subspaceNavigationHeight) + 'px';
                                header.css('top', newValue);
                            }, 20);
                        }
                        
                        Subspace.lastScrollTop = st;
                    }
                  });    
                });
                
                observerSidebar = new MutationObserver(function(mutations) {
                  mutations.forEach(function(mutation) {
                    setTimeout(function() {
                        var newHeight = 180 + subspaceNavigationHeight;
                        if(headerMessage.length > 0 && (jQuery(window).scrollTop() < headerMessage.height())) {
                            newHeight += headerMessage.height();
                        }
                        
                        jQuery('#page .ia-splitter .ia-fixed-sidebar').css('top', newHeight + 'px');
                    }, 20);
                  });    
                });
                 
                var config = { attributes: true };
                 
                var target = document.querySelector('#main-header');
                observerOverlayHeader.observe(target, config);
                
                target = document.querySelector('#page .ia-splitter .ia-fixed-sidebar');
                observerSidebar.observe(target, config);
                
                target = document.querySelector('#main');
                observerSidebar.observe(target, config);
            }
            
            Subspace.subspaceNavigationHeight = subspaceNavigationHeight;
        };
        
        $('#navigationconfigdialog button.aui-button-primary').click(function() {
            setTimeout(function() {
                var headerMessage = jQuery('#header-precursor');
                var newHeight = jQuery('#navigationbarpro').height() > Subspace.subspaceNavigationHeight ? 142 + jQuery('#navigationbarpro').height() : 180 + jQuery('#navigationbarpro').height();
                if(headerMessage.length > 0 && (jQuery(window).scrollTop() < headerMessage.height())) {
                    newHeight += headerMessage.height();
                }
                
                jQuery('#page .ia-splitter .ia-fixed-sidebar').css('top', newHeight + 'px');
                
                fixTheme();
            }, 20);
        });
        
        fixTheme();
    });
</script>