Styling the Mobile Close (×) button

Knowledgebase Docs » UberMenu 2 » FAQs
USEFUL? 5
UberMenu 2

The black square that shows up on mobile devices allowing to close the menu on touchscreens can be styles with the selectors below. I recommend only changing colors/fonts.

#megaMenu ul.megaMenu li.menu-item a span.uber-close,
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close{
    top:0;
    right:0;
    background:#999;
    background:rgba( 0, 0, 0, .9 );
    font-size:20px;
    font-weight:bold;
    color:#f5f5f5;
}

Styling the open and closed states

/* Style the "x" */
#megaMenu ul.megaMenu li.menu-item a span.uber-close[data-uber-status="open"],
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close[data-uber-status="open"]{
  background:red;	
}
/* Style the down arrow */
#megaMenu ul.megaMenu li.menu-item a span.uber-close[data-uber-status="closed"],
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close[data-uber-status="closed"]{
  background:blue;	
}