How to add a Vertical UberMenu in a Sidebar

Are you using UberMenu 3? Please check out the UberMenu 3: Vertical Menu in a Sidebar article.

Adding a new menu in a sidebar

If your theme already includes a sidebar menu with a registered theme location, you can use UberMenu as usual and simply activate that theme location. However, if you need to add a new menu where one previously did not exist in the sidebar, you’ll want to add a new text widget containing UberMenu via the Easy Integration shortcode.

1. Enable UberMenu Easy Integration in the UberMenu Options Panel
2. Activate “UberMenu” in Activate Uber Menu Locations and set your desired menu under “UberMenu” in Theme Locations in Appearance > Menus.
3. Add a new Text Widget to the sidebar of your choice.
4. Set the content of the Text Widget to:
   [uberMenu_easyIntegrate echo="false"]

How to place the menu in a RIGHT sidebar

Please note that this FAQ is here to assist you as a reference guide, but it is considered a customization outside the realm of supported features.

By default, UberMenu flys out to the right, so we’ll need to add some custom CSS to adjust that if we’re using it in a right sidebar. After completing the above steps, continue with these instructions for a menu in the right sidebar:

1. Add this CSS to either your custom.css file or to a location where you store custom CSS

   #megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu,
   #megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1{
       left:auto !important;
       right:100% !important;
   }

2. Modify any other CSS you want, for example to remove or reverse the dropdown/flyout arrow indicators. You may want to adjust the submenu styles, for example:

   #megaMenu.megaMenuVertical ul.megaMenu > li.ss-nav-menu-mega > ul.sub-menu-1, 
   #megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-reg > ul.sub-menu{
       border-left:1px solid #ddd !important;    
       border-right:none;
       box-shadow:-2px 2px #eee;
   }

3. Customize the menu as usual.

Reverse Arrows

Here’s some code to help with reversing the arrow indicators

#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > a::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > a::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > a::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator::after{
  right:auto;
  left:3px;
  top:50%;
  margin-top:-3px;
  border-style: solid solid solid none;
  border-color: transparent;
  border-right-color: #999;
  border-width: 2px 3px 2px 0px;
  padding-left: 1px;
}