Hiding Menu Items at different screen sizes

You may wish to hide certain menu items at different viewport sizes. To do so, you could add some CSS like this and then add the appropriate class to your menu items.

The classes defined below are

um-below-960 Displays only on viewports < 960px wide um-above-960 Displays only on viewports > 960px wide

um-below-767 Displays only on viewports < 767px wide um-above-767 Displays only on viewports > 767px wide

um-below-480 Displays only on viewports < 480px wide um-above-480 Displays only on viewports > 480px wide

#megaMenu ul.megaMenu li.menu-item.um-below-960{
  display:none;	
}
#megaMenu ul.megaMenu li.menu-item.um-below-767{
  display:none;	
}
#megaMenu ul.megaMenu li.menu-item.um-below-480{
  display:none;	
}

@media only screen and (max-width: 960px){
   #megaMenu ul.megaMenu li.menu-item.um-above-960{
      display:none;	
   }
   #megaMenu ul.megaMenu li.menu-item.um-below-960{
      display: block;
   }
}
@media only screen and (max-width: 767px) {
   #megaMenu ul.megaMenu li.menu-item.um-above-767{
     display:none;	
   }
   #megaMenu ul.megaMenu li.menu-item.um-below-767{
     display:block;	
   }
}
@media only screen and (max-width: 479px){
   #megaMenu ul.megaMenu li.menu-item.um-above-480{
     display:none;	
   }
   #megaMenu ul.megaMenu li.menu-item.um-below-480{
     display:block;	
   }
}