Skip to main content

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

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>

 


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


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


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

 


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>

 


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


Reply