Cleaning up the main Mega Menu dropdown

Hello @anirbandutta thanks a lot for your question. This is not currently possible. However that is an interesting use case so I converted it to an idea so it can gather some votes.

I have a follow up questions: Why do you want to hide those defaults options to your registered users? We see them as valuable to give them quick access especially for Super users. For example super users have an easy way to see all questions without a best answer and can help to reply

Hi, @anirbandutta. We wanted to do something similar and found a work around for now (more below). So, in general, I like the idea of being able to customize the mega menu drop downs. You’ve got my vote!

As our immediate solution, we’re using CSS to hide those quick links. I believe it’s this, but I’m out of my expertise there. 

.header-navigation .main-menu-list--quiclinks {
  display:none;

Note: I think this might also hide the Knowledge Base quicklink the KB drop down portion. The code doesn’t seem to specify the community module and I’m seeing the KB overview quicklink hidden in that part of the menu as well. 

Thank you @Marion Frecaut .

@DannyPancratz glad to know the idea resonated w you and Thank you so much for sharing the css hack.

I will check it out on our Staging. The second main menu item for us is a static link, ‘Events’, the imact of this .css line on which I’ll keep an eye on.

Thanks again!

@anirbandutta @DannyPancratz there is a script based way of doing it more selectively.
So if you wanted to remove only the very top link for example:

<script>
  var dropDownLinks = document.getElementsByClassName("main-menu-list__item");
  dropDownLinks[0].setAttribute(''class'', ''dont-show'');
</script> 

Then if you wanted to remove the second one too, you’d just repeat the second line with dropDownLinks[0], as you’d want to remove the new top item. 

But if you wanted to remove only the second one you’d have to replace the “0” by “1”… and so on…

This relies on my usual trick of the dont-show class which is also a display none style like @DannyPancratz only targeted to a specific occurrence rather than all items of a class via the script.

.dont-show {
  display:none;
}

I still feel very limited by the Mega Menu and am getting close to going full custom HTML for such reasons as the above and the limitation to a single dropdown with all categories. Hence the idea: 

Ive been talking to InSided about this for a few weeks :) 

You have my vote and sympathy! 

Hey! I’m happy to announce that a feature that will help avoid custom code to achieve this just went live. Take a look at the related product update here: 

Any questions, comments or feedback are always welcome!