[censusadv88]

ADAPT HACK OF THE DAY 1/15/2013

Problem: In WebKit browsers (Chrome & Safari) the dropdown header menus in mobile mode do not render the background color. This causes the the drop down to be plain white (the text is also white) such that the labels "Help & Information" and "Product Categories" are not shown. However since IE, and FF do render the background color you do see labels.

Solution: Add a conditional CSS code for webkit browsers to render the text for the drop down header menus in black. Conditional CSS allow you to target the problematic browser, and fix errors.

In altskin.css (located in skin/adapt/css) find:

/*--------------------------------------------------------
MOBILE MODE HEADER SELECT MENUS
--------------------------------------------------------*/

select.mobile_header_menu, 
select.mobile_mega_menu,
select.mobile_flyout_menu {
	width: 100%;
	background: #2887D6 url(../images/gradient.png) center repeat-x;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	border: 1px solid #ccc;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

Add the following conditional CSS AFTER THIS CODE!

@media screen and (-webkit-min-device-pixel-ratio:0) {
        select.mobile_header_menu,select.mobile_flyout_menu {
            color:#000;
        }
    }

Hope this helps!