Desktop menu vs mobile (iPhone) menu

Phong

I had the SmugMug Heros help get my main site menu colors fixed, so that they rendered pure white through the desktop browser. They correct my issue using a custom CSS, but I noticed that the menu, when viewed on my iPhone browser, displays the top level menu items way too dark. The flyouts are fine. Can anyone advise of the additional CSS updates required to render the mobile menus correctly? (www.westbydigitalmedia.com).

Thanks in advance .

Hikin' Mike

Add this to your theme's CSS:

@media only screen and (max-width: 480px) {

    .sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover {
        color: #fff;
        }

}   

Phong

Thanks Mike...but that didn't appear to correct the issue.

The hover is now white, but the "base" menu items are still dark. Unfortunately I can't post a screenshot :-(

Hikin' Mike

I forgot the drop downs. This should work now. Remove the one above and use this instead.

@media only screen and (max-width: 480px) {

    .sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > .sm-accordion-item-label, 
    .sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:active, 
    .sm-user-ui .sm-accordion > .sm-accordion-item.sm-accordion-item-open > a.sm-accordion-item-label:visited {
        color: #ccc;
        }

    .sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover {
        color: #fff;
        }

}