Mobile: Admin menu covers with Responsive Theme

#1419044: Responsive strategy for admin_menu

Here's a quick (super quick) css snippet to assist in developing with admin_menu enabled. I am developing with omega, so this IS an omega-specific approach, since it adds the class .responsive-layout-mobile. You should adapt this to work with your theme.

.responsive-layout-mobile #admin-menu li {
	display:none;
}
.responsive-layout-mobile #admin-menu li:first-child {
	display:block;
}
.responsive-layout-mobile #admin-menu:hover li {
	display:block;
}

It hides all the menu li, except the first which leaves the add content link and a slim black bar. When you hover over any part of the bar, it will reveal all the links again. This does not address the responsive strategy, but it is much better than the default.

Transition works for me - add to your mobile CSS

#admin-menu, #admin-menu-wrapper {
  height:30px;width:50px;
  background:none;
  box-shadow:none;
  transition:height,width,background,box-shadow;
  -webkit-transition: height,width,background,box-shadow;
}

#admin-menu:hover, #admin-menu-wrapper:hover {
  height:inherit;
  width:inherit;
  background:black;
  box-shadow:5px 5px 5px #888;
}

Here's my js approach (patch included). It will change the top margin dynamically.

Edit. I think it should be inside "if (!settings.admin_menu.suppress && settings.admin_menu.margin_top) {" to it can be turned off from admin.