- Created by Maximilian Heyne, last modified by Yelyzaveta Burda on Feb 13, 2024
You are viewing an old version of this page. View the current version.
Compare with Current View Page History
« Previous Version 7 Current »
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:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
- No labels