Responsive Website - mobile size - jQuery tabs don't work

Question

http://www.cheryldesign.com/category/portfolio/

On the above page, when you shrink the browser down below 475px wide, the tabs aren't clickable anymore. I've been looking at this for a week and can't figure out what's going on.

jQuery(document).ready(function()
{
jQuery("#access").accessibleDropDown();
});

jQuery.fn.accessibleDropDown = function ()
{
var el = jQuery(this);

/* Setup dropdown menus for IE 6 */

jQuery("li", el).mouseover(function() {
    jQuery(this).addClass("hover");
}).mouseout(function() {
    jQuery(this).removeClass("hover");
});

/* Make dropdown menus keyboard accessible */

jQuery("a", el).focus(function() {
    jQuery(this).parents("li").addClass("hover");
}).blur(function() {
    jQuery(this).parents("li").removeClass("hover");
});
}

Answer 1

The header element with the id of branding has, bizarrely, a gigantic set of margins and padding. When the display shrinks enough that this element is positioned above the rest of the page these huge margin and padding settings block the rest of the page from being interacted with. Essentially the padding on the bottom of that header overlays everything.

Try removing these and you will see it work as expected.

Specifically on line 289 of style.css change the values for margin-bottom and padding-bottom... in fact try simply removing them.

Answer 2

Through firebug i found some big paddings and margins in your style.css:

#branding {
    background: url("images/mobile_header.png") no-repeat scroll left top transparent;
    height: auto;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 10;
}

#branding {
    background-color: #55AEBB;
    background-image: url("images/pattern1.png");
    background-position: left top;
    background-repeat: repeat-x;
    box-shadow: 10px 0 5px 0 rgba(0, 0, 0, 0.25);
    float: left;
    margin-bottom: -99999px;    // i removed this from firebug and
    min-height: 100%;
    padding-bottom: 99999px;    // this one.
    position: fixed;
    top: 0;
    width: 20%;
    z-index: 10;
}

When i removed those couple of css attributes for #branding the 2nd one all worked.