기존 템플릿의 Wordpress 메가 메뉴 위젯 모바일 스타일 문제

Question

이것은 내 웹 사이트 - http://pl.bodwell.edu입니다. 자사의 Wordpress 사이트는 사용자 정의 템플릿 (http://sketchthemes.com/samples/invert-business-demo/)과 최대 메가 메뉴 (http://www.maxmegamenu.com/)라는 위젯을 실행합니다.

내가 겪고있는 문제는 템플릿의 상단 탐색 모음과 중첩 된 메뉴가 모바일보기에있는 경우입니다. 탐색 막대는 사용자가 페이지를 아래로 스크롤 할 때 축소됩니다. 메뉴와 탐색 모음은 1024px 너비 이상의 데스크톱 화면 크기에서 잘 작동합니다. 그러나 뷰포트가 그 아래로 줄어들면 모바일 메뉴가 트리거되어 문제가있을 때 전체 너비 메뉴가 바뀝니다.

모바일 메뉴는 페이지가 맨 위에 있고 전체 헤더가 유효 할 때 유용합니다. 그러나 아래로 스크롤하여 최소 헤더가 나타나면 모바일 메뉴가 위로 이동하고 켜기/끄기 전환을 포함하므로 사용자가 맨 위로 스크롤 할 때까지 메뉴를 켜고 끌 수 없습니다. 그러면 메뉴가 나타납니다. 토글 (내가 원하는 것) 아래. 나는 Firebug를 사용하여 적절한 CSS 선택기가 무엇인지 알았으므로 강제로 메뉴를 바꿀 수는 있지만, 내 인생을 생각할 수는 없다. 페이지 아래로 스크롤 할 때 맨 위 머리글을 최소화하는 역할을하는 템플릿 javascript와 관련이 있는지 확실하지 않습니다.

그래서 이것이 완전히 CSS 문제인지, JS 문제인지, 또는 둘의 조합인지는 알 수 없습니다.

여기 내 CSS는 메뉴 스타일과 관련되어 있습니다.

#header.skehead-headernav-shrink { height: 60px; } 
#skenav {background:none repeat scroll 0 0 transparent; display:block; margin-left:auto; margin- 
right:auto; border:medium none; } 
#skenav .ske-menu, ul.menu { font-size: 13px; margin: 0px; display:inline-block; width:auto; 
float:right; } 
#skenav .ske-menu ul.menu { list-style: none; margin: 0; } 
#skenav .ske-menu .menu li, ul.menu li { float: left; position: relative; margin-left: 0px; 
list-style: none outside none; } 
#skenav a {color: #333333;display: block;font-size: 13px; text-transform:uppercase; line-height: 
85px; padding: 0 22px;text-decoration: none; 
transition: color 0.1s linear 0s, background 0.1s linear 0s; -webkit-transition: color 0.1s 
linear 0s, background 0.1s linear 0s; -moz-transition: color 0.1s linear 0s, background 0.1s 
linear 0s;  -o-transition: color 0.1s linear 0s, background 0.1s linear 0s; } 
#skenav ul ul { position: absolute; top: 100%; left: 0px; float: left; width: 200px; z-index: 
99999; } 
#skenav ul .sub-menu li ,#skenav ul ul li { display: block; width:100%; } 
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child { border-top: none; } 
#skenav ul ul li{ border-top: 1px solid rgba(0,0,0,.15); } 
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{ left: 100%; top: 0px !important; border-top: 0 none;margin-top:0; } 
#skenav ul ul a { line-height: 1.2em; font-size: 13px; padding: 10px 20px; width: auto; height: auto; color: #FFFFFF; } 
#header.skehead-headernav-shrink #skenav ul ul a { line-height: 1.2em; } 
#skenav ul li:hover{ z-index:999999999999; } 
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover { color: #fff; } 

아무도 내 사이트를보고 도움을 줄 수있는 성향이 있다면 정말 감사하겠습니다.

Answer 1

#header.skehead-headernav-shrink { 
    height: 60px; 
} 
#skenav { 
    background:none repeat scroll 0 0 transparent; 
    display:block; 
    margin-left:auto; 
    margin- right:auto; 
    border:medium none; 
} 
#skenav .ske-menu, ul.menu { 
    font-size: 13px; 
    margin: 0px; 
    display:inline-block; 
    width:auto; 
    float:right; 
} 
#skenav .ske-menu ul.menu { 
    list-style: none; 
    margin: 0; 
} 
#skenav .ske-menu .menu li, ul.menu li { 
    float: left; 
    position: relative; 
    margin-left: 0px; 
    list-style: none outside none; 
} 
#skenav a { 
    color: #333333; 
    display: block; 
    font-size: 13px; 
    text-transform:uppercase; 
    line-height: 85px; 
    padding: 0 22px; 
    text-decoration: none; 
    transition: color 0.1s linear 0s, background 0.1s linear 0s; 
    -webkit-transition: color 0.1s linear 0s, background 0.1s linear 0s; 
    -moz-transition: color 0.1s linear 0s, background 0.1s linear 0s; 
    -o-transition: color 0.1s linear 0s, background 0.1s linear 0s; 
} 
#skenav ul ul { 
    position: absolute; 
    top: 100%; 
    left: 0px; 
    float: left; 
    width: 200px; 
    z-index: 99999; 
} 
#skenav ul .sub-menu li, #skenav ul ul li { 
    display: block; 
    width:100%; 
} 
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child { 
    border-top: none; 
} 
#skenav ul ul li { 
    border-top: 1px solid rgba(0, 0, 0, .15); 
} 
#skenav ul ul ul.sub-menu, #skenav ul ul ul.children { 
    left: 100%; 
    top: 0px !important; 
    border-top: 0 none; 
    margin-top:0; 
} 
#skenav ul ul a { 
    line-height: 1.2em; 
    font-size: 13px; 
    padding: 10px 20px; 
    width: auto; 
    height: auto; 
    color: #FFFFFF; 
} 
#header.skehead-headernav-shrink #skenav ul ul a { 
    line-height: 1.2em; 
} 
#skenav ul li:hover { 
    z-index:999999999999; 
} 
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover { 
    color: #fff; 
}