Skip to main content
Jef Vanlaer
Helper ⭐️⭐️⭐️
Dec 5, 2024 11:58 AM UTC
Solved

Hide (shared) mega menu on a custom page

Is there a way to hide the (shared) mega menu on a specific custom page?

    Kenneth R
    Kenneth RAnswer
    Expert ⭐️⭐️
    Dec 5, 2024 1:56 PM UTC

    Hey ​@Jef Vanlaer - yep you can do that using a bit of code in your third-party scripts section.  Here’s an example that just worked well for me in our sandbox, but note that I’m not an experienced developer so please also do your own testing and due diligence.  :)

    <script>
    document.addEventListener('DOMContentLoaded', function () {
    if (window.location.href === 'https://yourcommunity.com/p/yourcustompage') { // Replace with the link to your custom page
    ;
    const interval = setInterval(function () {
    const navSection = document.querySelector('.main-navigation-sitewidth');
    if (navSection) {
    navSection.remove();
    clearInterval(interval);
    }
    }, 100);
    }
    });
    </script>

     

    6 replies

    Kenneth R
    Kenneth RAnswer
    Expert ⭐️⭐️
    Dec 5, 2024 1:56 PM UTC

    Hey ​@Jef Vanlaer - yep you can do that using a bit of code in your third-party scripts section.  Here’s an example that just worked well for me in our sandbox, but note that I’m not an experienced developer so please also do your own testing and due diligence.  :)

    <script>
    document.addEventListener('DOMContentLoaded', function () {
    if (window.location.href === 'https://yourcommunity.com/p/yourcustompage') { // Replace with the link to your custom page
    ;
    const interval = setInterval(function () {
    const navSection = document.querySelector('.main-navigation-sitewidth');
    if (navSection) {
    navSection.remove();
    clearInterval(interval);
    }
    }, 100);
    }
    });
    </script>

     

    Translate
    Jef Vanlaer
    Helper ⭐️⭐️⭐️
    Dec 5, 2024 3:38 PM UTC

    Thanks ​@Kenneth R . This seems to be what I was looking for indeed; will try it out!

    Translate
    Jef Vanlaer
    Helper ⭐️⭐️⭐️
    Dec 5, 2024 3:57 PM UTC

    ​@Kenneth R The script does the trick indeed. It does seem to preserve a small bar in the background color of the mega menu, which does not really seem to be an issue if the element above or below it have the same background color (it’s just a small separator in that case).

    Translate
    Jef Vanlaer
    Helper ⭐️⭐️⭐️
    Dec 6, 2024 8:58 AM UTC

    ​@Kenneth R For your information: I (with the help of ChatGPT) made a small update to the script, so it also removes the wrapper around the mega menu:

    <script>
    document.addEventListener('DOMContentLoaded', function () {
    if (window.location.href === 'https://yourcommunity.com/p/yourcustompage') { // Replace with the link to your custom page
    ;
    const interval = setInterval(function () {
    const navSection = document.querySelector('.main-navigation--wrapper.header-navigation');
    if (navSection) {
    navSection.remove();
    clearInterval(interval);
    }
    }, 100);
    }
    });
    </script>

     

    Translate
    Jef Vanlaer
    Helper ⭐️⭐️⭐️
    Dec 6, 2024 10:07 AM UTC

    And here’s an extension to include multiple pages and partial urls:

    <script>
    document.addEventListener('DOMContentLoaded', function () {
    // Array of URL fragments to check
    const targetUrls = [
    '/p/yourcustompage', // Partial path or substring to match
    '/p/anotherpage', // Add more as needed
    '/p/andanotherone' // Example of another partial URL
    ];

    // Check if the current URL contains any of the target strings
    const currentUrl = window.location.href;
    const isTargetPage = targetUrls.some(urlFragment => currentUrl.includes(urlFragment));

    if (isTargetPage) {
    const interval = setInterval(function () {
    const navWrapper = document.querySelector('.main-navigation--wrapper.header-navigation');
    if (navWrapper) {
    navWrapper.remove(); // Remove the element
    clearInterval(interval); // Stop checking
    }
    }, 100);
    }
    });
    </script>

     

    Translate
    Kenneth R
    Expert ⭐️⭐️
    Dec 9, 2024 8:09 AM UTC

    Awesome ​@Jef Vanlaer - love the extensions you added!  :)

    Translate