2014-11-09 1 views
0

http://html5up.net/prologue에서 HTML5 템플릿을 다운로드했습니다. 템플릿이 반응하고 탐색 메뉴가 모바일에서 계속 클릭되어 메뉴 항목을 표시합니다. 내가 성취하고자하는 것은 모바일 뷰의 메뉴처럼 고정 된 상태의 이미지를 상단에 포함시키는 것입니다. 아래에 div를 추가하려고 시도했습니다.이미지 표시 줄을 모바일 메뉴 상단에 위치 시키려면 어떻게해야합니까?

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:99;"> 
<img src="nameofimagefile"/> 
</div> 

하지만 필요한 것을 얻을 수 없습니다. 이미지는 상단에 있지만 메뉴 항목을 차단하거나 숨 깁니다. 이 일을 성사시켜 주시겠습니까?

현재 웹 사이트 :
Present Website

내가이 원하는 무엇 :

다음 이미지는 내가 달성하기 위해 노력하고있는 무슨에 명확하게 할 수
What I Would Like

+0

div에 'display : inline'을 사용하십시오. –

+0

display : 인라인은 아무런 차이가 없습니다. –

+0

이 마음에 드십니까? http://cssdeck.com/labs/vkfbmkgf –

답변

1

당신은이 않는 좁은 화면에서만 작동하려면 다음

에서 /js/init.js 파일 sidePanelToggle 개체를 찾을 버튼

과의 HTML 부동산 당신의 사업부에 추가
// ... 
sidePanelToggle: { 
        breakpoints: 'narrower', 
        position: 'top-left', 
        side: 'top', 
        height: '4em', 
        width: '5em', 
        html: '<div data-action="toggleLayer" data-args="sidePanel" class="toggle"></div>' + '<div style="position: fixed; display: inline; top: 0; right: 5px; color: white">Your buttons here</div>' 
// ... 
+0

두 모드에서 작동하는 방법을 모르겠습니다. 좁은 모드에만 해당하는 제안 –

+0

저에게는 충분합니다. 고맙습니다. –

0

변화를 the

#main section.cover { 
    padding: 0; /*for all the @media css*/ 
} 

헤더 태그 내의 h2 태그 앞에 이미지 태그를 추가하십시오.

작동합니다.

+0

코드는 이미지를 맨 위에 표시하는 것입니다. 모바일 브라우저에서 스크롤 할 때 맨 위에 머물러 있지 않습니다. –

+0

모바일을 포함하여 많은 "#main section.cover 패딩"이 있습니다. 내 의견을 놓치지 않을 것 같아요 ... – Thiyagesh

관련 문제