如何使圖像欄與移動設備上的菜單保持一致？

我已經從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

來源

2014-11-09 Javed Ahmed

嘗試在div中使用'display：inline' – 2014-11-09 05:56:42

display：inline沒有任何區別。 – 2014-11-09 06:02:52

是這樣的嗎？ http://cssdeck.com/labs/vkfbmkgf – 2014-11-09 06:06:07

如果你想它的工作原理只有一條狹窄的屏幕上做此：

在/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>' 
// ...

來源

2014-11-09 07:11:31

我不知道如何使它在兩種模式下都能正常工作。該建議僅適用於狹義模式 – 2014-11-09 07:12:48

這對我來說已經足夠了。非常感謝你。 – 2014-11-09 07:23:58

變化

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

，然後H2標籤前添加標題標籤中的圖像標籤

很有效！

來源

2014-11-09 06:08:21 Thiyagesh

您的代碼僅顯示頂部的圖像。當我們在手機瀏覽器中滾動時，它並沒有處於頂端。 – 2014-11-09 06:13:21

有很多「#main section.cover paddings」，包括手機..我想你可能會錯過評論... – Thiyagesh 2014-11-09 07:16:23

如何使圖像欄與移動設備上的菜單保持一致？

回答

相關問題