Login

How to remove the arrow submenu indicators (triangles)

Support CenterSubmit a Ticket

How to remove the arrow submenu indicators (triangles)

Heads up! 

This archived doc is for an old version of UberMenu. 

For the current documentation, please visit the UberMenu 3 Knowledgebase

The submenu indicator arrows (triangles) provide a visual queue to the user that there is more content to be revealed.

Remove the arrows from items with no submenu

Arrow submenu indicators are added when one of two conditions are met:

  1. The Activate Mega Menu option is checked on a top level menu item.
  2. A flyout menu (Activate Mega Menu is unchecked) has child items

Activate Mega Menu

If you have top level menu items with no submenus and want to remove the arrows, simply uncheck Activate Mega Menu on those menu items

Don’t forget to hover over the ? tooltips for in-plugin documentation!

Remove the arrows entirely

The arrow indicators are added using CSS :after pseudoclasses. To remove them add this CSS:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg > li.megaReg-with-sub > a::after, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a::after, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a::after, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator::after, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator::after, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator::after{
  display:none;
  border:none !important;
}

And to remove them from IE8, which does not support the ::after CSS3 pseudoclass, but only the `:after` CSS2 pseudoclass, you may need to add this as well:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg > li.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after{
  display:none !important;
  border:none !important;
}

You can then adjust the right-padding if you wish using these selectors: http://wpmegamenu.com/customizer/#top-level-a

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > span.um-anchoremulator, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator{
  padding-right:10px;	
}

On this page