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>

Related Articles

Page:

SubSpace and Linchpin Theme not working properly
Page:

SubSpace and Metadata Integration
Page:

Navigation Elements are displayed as No Permission
Page:

Error when trying to add space element to navigation
Page:

Cannot move child elements using drag and drop
Page:

How to force external links to open in a new tab
Page:

Warning in log
Page:

Create new child sub-spaces under space elements
Page:

SubSpace Pricing Change
Page:

Spaces are reset after migration from 2.2.2 to 3.x
Page:

Replace Subspace Macro with Navigation Macro
Page:

Newly added navigation elements (spaces) disappearing
Page:

Navigation color is wrong after update to version 3.3
Page:

Hide Navigation menu entry for specific groups
Page:

Hide navigation in Confluence header

Communardo Knowledge Base

SubSpace and Linchpin Theme not working properly

Analytics

Problem

Solution 1 - Modifying the Linchpin Theme

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

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

Solution 2 - Modifying Confluence custom HTML

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

Related content