如何使图像栏与移动设备上的菜单保持一致？

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 对象并将您的 div 按钮添加到其 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>'
// ...

Answer 2

改变

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

然后在header标签内的h2标签之前添加image标签

它会起作用的！