Skip to main content

Mobile view: hide secondary navigation section or left "appears on" for a cleaner look

Script for Secondary Navigation 

document.addEventListener("DOMContentLoaded", function() {
    function hideElements() {
        if (window.innerWidth <= 500) {
            document.querySelectorAll('#page-header .header-links, #app .header-links').forEach(function(el) {
                el.style.display = 'none';
            });
        } else {
            document.querySelectorAll('#page-header .header-links, #app .header-links').forEach(function(el) {
                el.style.display = '';
            });
        }
    }

    hideElements();
    window.addEventListener('resize', hideElements);
});
 

Secondary navigation items section will now poof like Thanos snapped if content width is less than 500px. See it by inspecting Izzy's World and switching to mobile view. 

Script for Left nav "appears on" 

document.addEventListener("DOMContentLoaded", function() {
    function hideElements() {
        if (window.innerWidth <= 500) {
            document.querySelectorAll('#app nav.left-navigation, #app nav.appears-on').forEach(function(el) {
                el.style.display = 'none';
            });
        } else {
            document.querySelectorAll('#app nav.left-navigation, #app nav.appears-on').forEach(function(el) {
                el.style.display = '';
            });
        }
    }

    hideElements();
    window.addEventListener('resize', hideElements);
});