Hiding Menu Items at different screen sizes

Knowledgebase Docs » UberMenu 2 » Responsive & Mobile
USEFUL? 7
UberMenu 2

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 wideum-above-960 Displays only on viewports > 960px wide

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

um-below-480 Displays only on viewports < 480px wideum-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;	
   }
}