Menus and mobile sites

Question

We're using a theme based off Adaptive Theme, but even dropping columns below the main content still has undesired rendering outcome. When region-sidebar-first drops below content-inner there is a problem -- since the link colors contained within sidebar first and the body background color are both white.

What I'd like to have happen is that for mobile devices or when the browser size is under a certain width, I'd like to remove region-sidebar-first and region-sidebar-second and move the menu into another field that into another collapisable region to function as a 'mobile menu'.

Question: Could context handle this? Is there a mobile to handle such logic?

Current our setting appear as follows

Answer 1

This is more a CSS question I think. I solved this problem already for various sites using another menu block, with its own css markup, or using a jump menu.

Using media queries you will have to set the threshold on where to break:

@media all and (max-width: 370px) {
    .default-menu-region {
        display:none;
    }
    .mobile-menu {
        display:block;
    }
}

@media all and (min-width: 371px) {
    .mobile-menu {
        display:none;
    }
}

Adaptive theme provides files for those media queries already, you can just drop your custom content in there instead of writing new media queries like in this example.