The main configuration has to be created first on the root page.

 GOOGLE TAG MANAGER LOADING SPINNER
META NAVIGATION NAVBAR | JUMBOTRON | BREADCRUMB EXPANDED CONTENT TOP PAGE CONTENT
EXPANDED CONTENT BOTTOM BREADCRUMB BOTTOM
PAGEBROWSER FOOTER BACK TO TOP BUTTON

back-to-top

// Default - Main.html const navbar = document.getElementById('main-navbar'), navbarHeight = navbar.clientHeight, navbarBreakpointWidth = document.body.getAttribute('data-navbar-breakpointwidth'), viewportWidth = parseFloat(getComputedStyle(document.querySelector('html'), null).width.replace("px", "")), onePageLayout = navbar.classList.contains('sectionMenu'); var fixedNavbar = false; if ( navbar.classList.contains('fixed-top') || navbar.classList.contains('sticky-top') ) { fixedNavbar = true; } // Scroll anchor - Main.html if (window.location.hash) { t3sbScrollToAnchor({t3sb:intval(number: '{settings.config.sectionmenuAnchorOffset}')}, fixedNavbar, navbarHeight); } // Default - Main.html const navbar = false, navbarHeight = false, navbarBreakpointWidth = 99999, viewportWidth = parseFloat(getComputedStyle(document.querySelector('html'), null).width.replace("px", "")), onePageLayout = 0; var fixedNavbar = false; // Scroll anchor - Main.html if (window.location.hash) { t3sbScrollToAnchor({t3sb:intval(number: '{settings.config.sectionmenuAnchorOffset}')}, fixedNavbar, navbarHeight); } Loading spinner // Loading spinner - Main.html window.onload = function() { let spinner = document.getElementById('site-preloader'); t3sbFadeOutEffect(spinner); }; Dark Mode // Dark mode - Main.html t3sbDarkMode(); Cookie for viewport width // Cookie for viewport width (usefull with fluid-container and image auto width) - Main.html document.cookie = 'viewportWidth='+viewportWidth+'; path=/; max-age=${60 * 60 * 24 * 14};'; Lazyload {t3sb:intval(number: '{settings.lazyLoadThreshold}')} // LazyLoad & Magnifying glass icon - Main.html var customthreshold = {customthreshold}; new LazyLoad({ elements_selector: '.lazy', threshold: customthreshold, callback_loaded: function(img) { t3sbMagnifying(img, viewportWidth, navbarBreakpointWidth); } }); // LazyLoad - Main.html var customthreshold = {customthreshold}; new LazyLoad({ elements_selector: '.lazy', threshold: customthreshold }); // Magnifying glass icon - Main.html var magnify = document.querySelectorAll('.zoom-overlay'); if ( magnify.length ) { document.querySelectorAll('figure.image').forEach ( img => { t3sbMagnifying(img, viewportWidth, navbarBreakpointWidth) } ) } Sticky footer html { position:relative; min-height:100% } #page-footer { position:absolute; bottom:0; width:100% } Link to top // Link to top - Main.html t3sbScrollToTop();