Skip to main content
Solved

Hide (shared) mega menu on a custom page

  • December 5, 2024
  • 6 replies
  • 28 views

Jef Vanlaer
Forum|alt.badge.img+2

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

Best answer by Kenneth R

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>

 

View original
Did you find this topic helpful?

6 replies

Kenneth R
Forum|alt.badge.img+5
  • Gainsight Community Manager
  • 433 replies
  • Answer
  • December 5, 2024

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>

 


Jef Vanlaer
Forum|alt.badge.img+2
  • Author
  • Helper ⭐️⭐️
  • 187 replies
  • December 5, 2024

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


Jef Vanlaer
Forum|alt.badge.img+2
  • Author
  • Helper ⭐️⭐️
  • 187 replies
  • December 5, 2024

@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).


Jef Vanlaer
Forum|alt.badge.img+2
  • Author
  • Helper ⭐️⭐️
  • 187 replies
  • December 6, 2024

@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>

 


Jef Vanlaer
Forum|alt.badge.img+2
  • Author
  • Helper ⭐️⭐️
  • 187 replies
  • December 6, 2024

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>

 


Kenneth R
Forum|alt.badge.img+5
  • Gainsight Community Manager
  • 433 replies
  • December 9, 2024

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings