Allow the creation of dropdowns in Mega Menu (With topic counters)

For full context my workaround until now has been to remove the appearance of the News & Announcements category and its 2 sub-categories and placing a simple link to the News & Announcements next to the dropdown I’ve labelled “Community Forums”.

For this I used the script:

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

In a perfect world the News & Announcements would also be a dropdown, and I’d be able to edit the content of the first dropdown without a script!

@SmartlyGreg great suggestion. You have to stop teasing us though with screenshots of your new community and let us all in to see your beta. Looks great. 

This is awesome ​@SmartlyGreg. I am receiving the following error trying to replicate your script “Unexpected char "<" (line: 32, char: 1)” any ideas on what I might be doing wrong?

Hi ​@ryanne.perry 👋,

Looks like there was a trailing character that was causing the script to error out. I added some other code which can achieve something similar:

<script>
  if (inSidedData.user.role == 'roles.guest') { 
document.getElementById('downshift-0-item-1').style.display = 'none';
document.getElementById('downshift-0-item-2').style.display = 'none';
  } 
</script> 

This will remove some of the dropdown menu items but for guest users only.