Skip to main content
Solved

Hide (shared) mega menu on a custom page

  • December 5, 2024
  • 6 replies
  • 44 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>

 

6 replies

Kenneth R
Forum|alt.badge.img+5
  • Expert ⭐️⭐️
  • 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 ⭐️⭐️
  • 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 ⭐️⭐️
  • 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 ⭐️⭐️
  • 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 ⭐️⭐️
  • 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
  • Expert ⭐️⭐️
  • December 9, 2024

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