응답 웹 사이트 - 모바일 크기 - 당신이 아래로 넓은 475px 아래의 브라우저를 축소 할 때 jQuery를 탭, 위의 페이지에서

Question

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

작동하지 않습니다이 탭은 더 이상 클릭 할 수 없습니다. 나는 이것을 일주일 동안보고 있었고 무슨 일이 일어나고 있는지 알 수 없다.

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

브랜딩의 ID가있는 헤더 요소에는 기괴한 여백과 패딩이 있습니다. 디스플레이가 축소되어이 요소가 나머지 페이지 위에 배치되면 이러한 거대한 마진 및 패딩 설정이 나머지 페이지가 상호 작용하는 것을 차단합니다. 본질적으로 헤더 하단의 패딩은 모든 것을 오버레이합니다.

이것을 제거하면 예상대로 작동하는 것을 볼 수 있습니다.

특히 style.css의 289 행에서 margin-bottom 및 padding-bottom ...의 값을 변경하십시오. 실제로는 간단히 제거하십시오. 불을 지르고 통해

Answer 2

내가 당신 style.css 일부 big paddings and margins을 발견

#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; 
} 

CSS의 그 부부는 #branding the 2nd one 모든 i removed 속성했다.