如何使图像栏在移动设备上保持最佳状态？

Question

我已从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>

但我无法实现我的需要。图像保持在顶部但阻止或隐藏菜单项。你能帮助我实现这个目标吗？

以下图片可能会清楚说明我想要实现的目标：

现在的网站：

我想要的是什么：

Answer 1

如果您希望它仅适用于狭窄的屏幕，请执行以下操作：

在 /js/init.js 文件中找到 sidePanelToggle 对象并添加到 html 属性中，带有按钮的div

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

Answer 2

更改

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

然后在标题标记

中的h2标记之前添加图像标记

它会起作用！